/* FeelDB sketch theme — cinematic, emotion-forward, editorial */

@font-face {
  font-family: 'Noto Sans Georgian';
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-georgian@latest/cyrillic-400-normal.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* ───── Base surfaces — deep theater black, paper-cream off-white ─────── */
  --color-bg: #0b0b0d;
  --color-bg-elevated: #131316;
  --color-surface: #1a1a1f;
  --color-surface-hover: #232328;
  --color-border: #2a2a30;
  --color-border-hover: #3d3d44;

  /* Light surfaces (used in panels/cards that pop) */
  --color-paper: #f5f1ea;
  --color-paper-warm: #ede5d3;
  --color-paper-text: #1c1917;

  /* Text */
  --color-text: #f5f1ea;
  --color-text-muted: #9b97a3;
  --color-text-dim: #6b6770;

  /* Accents */
  --color-accent: #d4af37;      /* gold — cinematic, emotion-as-craft */
  --color-accent-hover: #e5c25a;
  --color-link: #d4af37;

  /* 19 emotion brand colors — sourced from shipped Phase 2 palette */
  --color-emotion-joy:           #F59E0B;
  --color-emotion-sadness:       #6366F1;
  --color-emotion-fear:          #7C3AED;
  --color-emotion-awe:           #0EA5E9;
  --color-emotion-comfort:       #10B981;
  --color-emotion-dread:         #991B1B;
  --color-emotion-catharsis:     #EC4899;
  --color-emotion-contemplation: #A78BFA;
  --color-emotion-anger:         #EF4444;
  --color-emotion-nostalgia:     #D97706;
  --color-emotion-tension:       #0F766E;
  --color-emotion-wonder:        #7DD3FC;
  --color-emotion-loneliness:    #94A3B8;
  --color-emotion-bittersweet:   #F472B6;
  --color-emotion-hope:          #84CC16;
  --color-emotion-disgust:       #65A30D;
  --color-emotion-grief:         #475569;
  --color-emotion-excitement:    #FB923C;
  --color-emotion-tenderness:    #FCA5A5;

  /* ───── Typography ──────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Noto Serif Georgian', Georgia, serif;
  --font-sans: 'Inter', 'Noto Sans Georgian', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Scale (editorial — bigger jumps than Tailwind defaults) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4.5rem;
  --text-6xl: 6rem;

  /* ───── Spacing ─────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ───── Shapes ──────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ───── Shadows + ambience ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 60px -10px var(--color-accent);

  /* Container widths */
  --container-narrow: 720px;
  --container-default: 1200px;
  --container-wide: 1440px;
}

/* Reset + base */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

img { display: block; max-width: 100%; height: auto; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Helper */
.container { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--space-6); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); }

/* Sketch toolbar (fixed, top-right) */
.sketch-toolbar {
  position: fixed; top: 12px; right: 12px; z-index: 9999;
  display: flex; gap: 4px;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(10px);
  padding: 4px; border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: var(--text-xs);
}
.sketch-toolbar button {
  padding: 6px 12px; border-radius: var(--radius-full); color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s;
}
.sketch-toolbar button:hover { color: var(--color-text); }
.sketch-toolbar button.active { background: var(--color-accent); color: #000; }

.variant { display: none; }
.variant.active { display: block; }

/* Sketch label badge on each variant */
.variant-label {
  position: fixed; bottom: 16px; left: 16px; z-index: 9998;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs);
  padding: 6px 12px; border-radius: var(--radius-full);
}