/* ==========================================================================
   Emiteon — Design Tokens
   Motion Storytelling design system · cinematic dark (default identity)
   Brand: deep space-black + spectral-emissive gradient, sub-pixel grid motif.
   Every color/type/space value in the site comes from this file.
   ========================================================================== */

:root {
  /* ---- Canvas + scene backgrounds (chapters transition between these) ---- */
  --bg-base:     #05060a;
  --bg-scene-1:  #070912;
  --bg-scene-2:  #0b0814;
  --bg-scene-3:  #060e12;
  --bg-scene-4:  #0e0a08;
  --bg-elevated: #12141d;

  /* ---- Cinematic gradients (scene atmospheres) ---- */
  --grad-scene:  radial-gradient(60% 70% at 50% 30%, rgba(99, 102, 241, .28), transparent 60%);
  --grad-accent: linear-gradient(120deg, #6366f1 0%, #06b6d4 50%, #ec4899 100%);
  --grad-aurora: radial-gradient(45% 55% at 20% 20%, rgba(99, 102, 241, .30) 0%, transparent 60%),
                 radial-gradient(50% 60% at 80% 30%, rgba(6, 182, 212, .24) 0%, transparent 60%),
                 radial-gradient(50% 60% at 60% 90%, rgba(236, 72, 153, .18) 0%, transparent 62%);
  --grad-text:   linear-gradient(90deg, #ffffff 0%, #c7d2fe 55%, #67e8f9 100%);
  --grad-emissive: linear-gradient(90deg, #fb7185 0%, #34d399 50%, #38bdf8 100%);
  /* Spectral hairline used for card/plan edges — replaces flat 1px borders */
  --grad-hairline: linear-gradient(145deg, rgba(99,102,241,.55), rgba(6,182,212,.22) 38%,
                                   rgba(255,255,255,.05) 62%, rgba(236,72,153,.30));
  --grad-sheen: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.22) 48%, transparent 62%);
  --grad-rail: linear-gradient(180deg, var(--accent), var(--accent-2) 55%, transparent);

  /* ---- Surfaces ---- */
  --surface-1: #12141d;
  --surface-2: #181b27;
  --surface-3: #1e2230;
  --surface-glass: rgba(18, 20, 29, .5);
  /* Layered card fill: light falls from the top edge, as on a real panel */
  --surface-card: linear-gradient(178deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 42%),
                  var(--surface-1);
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, .08);

  /* ---- Text ramp ---- */
  --text-primary:   #f5f6fb;
  --text-secondary: #c2c7d6;
  --text-muted:     #939ab0;
  --text-faint:     #636a80;
  --text-on-accent: #0a0712;

  /* ---- Hairlines (panels/inputs only — never between scenes) ---- */
  --border-subtle:  rgba(255, 255, 255, .07);
  --border-default: rgba(255, 255, 255, .12);
  --border-strong:  rgba(255, 255, 255, .20);
  --ring: #a5b4fc;

  /* ---- Accent — the thread that traces the story ---- */
  --accent:       #6366f1;
  --accent-hover: #7c80f7;
  --accent-press: #5457e6;
  --accent-2:     #06b6d4;
  --accent-3:     #ec4899;
  --accent-soft:  rgba(99, 102, 241, .16);
  --accent-border: rgba(99, 102, 241, .42);

  /* ---- Semantic ---- */
  --success: #34d399; --success-soft: rgba(52, 211, 153, .16);
  --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, .16);
  --error:   #fb7185; --error-soft:   rgba(251, 113, 133, .16);
  --info:    #38bdf8; --info-soft:    rgba(56, 189, 248, .16);

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --shadow-card: 0 1px 1px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-card-hover: 0 1px 1px rgba(0,0,0,.4), 0 28px 60px -20px rgba(0,0,0,.85),
                       0 0 0 1px rgba(99,102,241,.18);
  --shadow-accent: 0 18px 46px -16px rgba(99, 102, 241, .65);
  --glow: 0 0 40px var(--accent-soft);
  --glow-strong: 0 0 0 1px rgba(99,102,241,.35), 0 20px 60px -18px rgba(99,102,241,.75);
  /* Fine film grain — keeps large dark gradients from banding */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  /* ---- Type ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display:  clamp(2.75rem, 1.4rem + 6.6vw, 6rem);
  --fs-h1:       clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --fs-h2:       clamp(1.75rem, 1.3rem + 2.2vw, 2.875rem);
  --fs-h3:       clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --fs-h4:       clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-lead:     clamp(1.125rem, 1.02rem + 0.55vw, 1.4375rem);
  --fs-body:     1rem;
  --fs-body-lg:  1.0625rem;
  --fs-small:    0.875rem;
  --fs-micro:    0.75rem;

  /* ---- Spacing (4-pt base / 8-pt rhythm) ---- */
  --space-0: 0;      --space-1: 4px;   --space-2: 8px;    --space-3: 12px;
  --space-4: 16px;   --space-5: 20px;  --space-6: 24px;   --space-8: 32px;
  --space-10: 40px;  --space-12: 48px; --space-16: 64px;  --space-20: 80px;
  --space-24: 96px;  --space-28: 112px;--space-32: 128px; --space-40: 160px;

  /* ---- Radii ---- */
  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px;

  /* ---- Containers ---- */
  --container-sm: 680px;  --container-md: 820px;  --container-lg: 1060px;
  --container-xl: 1200px; --container-2xl: 1360px;
  --gutter: clamp(20px, 5vw, 48px);

  /* ---- Section / scene rhythm ---- */
  --section-y:    clamp(72px, 9vw, 140px);
  --section-y-lg: clamp(104px, 13vw, 200px);
  --stack: clamp(16px, 2vw, 24px);

  /* ---- Scroll tracks ---- */
  --track-short: 150vh;
  --track:       250vh;
  --track-long:  400vh;

  /* ---- Grid ---- */
  --grid-cols: 12;
  --grid-gap: clamp(16px, 2.2vw, 28px);

  /* ---- Motion ---- */
  --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-slower: 800ms;
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Optional light theme — cinematic dark remains the default identity. */
[data-theme="light"] {
  --bg-base: #f7f8fc;
  --bg-scene-1: #f3f5fb;
  --bg-scene-2: #f6f3fc;
  --bg-scene-3: #eef7f8;
  --bg-scene-4: #fbf5f1;
  --bg-elevated: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f1f3f9;
  --surface-3: #e7eaf3;
  --surface-glass: rgba(255, 255, 255, .7);
  --surface-card: linear-gradient(178deg, rgba(255,255,255,.9), rgba(255,255,255,.5) 46%), #ffffff;
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, .9);
  --grad-hairline: linear-gradient(145deg, rgba(79,70,229,.38), rgba(6,182,212,.18) 40%,
                                   rgba(11,13,20,.06) 64%, rgba(236,72,153,.22));
  --text-primary: #0b0d14;
  --text-secondary: #3a4055;
  --text-muted: #5d6480;
  --text-faint: #858ca3;
  --border-subtle: rgba(11, 13, 20, .08);
  --border-default: rgba(11, 13, 20, .14);
  --border-strong: rgba(11, 13, 20, .24);
  --accent: #4f46e5;
  --accent-border: rgba(79, 70, 229, .40);
  --ring: #4f46e5;
  --shadow-md: 0 14px 40px rgba(12, 15, 30, .12);
  --shadow-lg: 0 30px 80px rgba(12, 15, 30, .16);
  --shadow-card: 0 1px 2px rgba(12,15,30,.06), 0 12px 30px -16px rgba(12,15,30,.28);
  --shadow-card-hover: 0 1px 2px rgba(12,15,30,.06), 0 26px 56px -22px rgba(12,15,30,.35),
                       0 0 0 1px rgba(79,70,229,.16);
}