/* ============================================================
   W2 FILMS — Design System Foundations
   "Neon Cinema": cinematic blacks lit by electric neon.
   Core duo: Magenta + Cyan. Accents: Acid Lime + Violet.
   ============================================================ */

/* ----- WEBFONTS -----
   Primary typeface: GEIST (Vercel, free / SIL OFL) — modern, geometric,
   highly legible "Apple-grade" UI type with a contemporary tech feel.
   GEIST MONO covers technical/timecode/metadata contexts.
   SF Pro stays as a native fallback on Apple devices. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     ============================================================ */

  /* Neutrals — dark-first "ink" ramp (cinematic blacks) */
  --ink-950: #050608;   /* deepest — page letterbox / void */
  --ink-900: #0A0B0E;   /* primary app background */
  --ink-850: #0F1116;   /* base surface */
  --ink-800: #14161C;   /* raised surface */
  --ink-700: #1B1E26;   /* cards / panels */
  --ink-600: #262A34;   /* elevated / inputs */
  --ink-500: #353B47;   /* strong hairline / divider */
  --ink-400: #4B515F;   /* disabled stroke */

  /* Light neutrals — text & inverse surfaces */
  --paper-0:  #FFFFFF;
  --paper-50: #F5F7FB;
  --paper-100:#E7EAF1;
  --slate-300:#AEB4C2;  /* secondary text on dark */
  --slate-400:#7E8597;  /* tertiary text on dark */
  --slate-500:#5A6172;  /* muted / placeholder */

  /* Neon — brand spectrum (vivid, high-contrast) */
  --magenta:    #FF2D8E;   /* PRIMARY brand */
  --magenta-bright:#FF54A6;
  --magenta-deep:  #D61075;
  --cyan:       #15E6F0;   /* SECONDARY brand */
  --cyan-bright:#5BF1F8;
  --cyan-deep:  #06B8C2;
  --lime:       #C6FF3D;   /* ACCENT — energy / highlight */
  --lime-deep:  #A6E60A;
  --violet:     #8B5CFF;   /* SUPPORT — used sparingly */
  --violet-bright:#A684FF;

  /* Neon — low-alpha tints for glows / wash backgrounds */
  --magenta-glow: rgba(255, 45, 142, 0.45);
  --cyan-glow:    rgba(21, 230, 240, 0.40);
  --lime-glow:    rgba(198, 255, 61, 0.35);
  --violet-glow:  rgba(139, 92, 255, 0.40);

  /* Semantic feedback (kept distinct from neon brand colors) */
  --success: #2BE08A;
  --warning: #FFC53D;
  --danger:  #FF4D63;
  --info:    var(--cyan);

  /* ============================================================
     COLOR — SEMANTIC TOKENS
     ============================================================ */
  --bg-void:        var(--ink-950);
  --bg-app:         var(--ink-900);
  --bg-surface:     var(--ink-850);
  --bg-raised:      var(--ink-800);
  --bg-card:        var(--ink-700);
  --bg-elevated:    var(--ink-600);
  --bg-input:       var(--ink-600);

  --fg-1: var(--paper-50);    /* primary text */
  --fg-2: var(--slate-300);   /* secondary text */
  --fg-3: var(--slate-400);   /* tertiary text */
  --fg-muted: var(--slate-500);
  --fg-on-neon: var(--ink-950); /* text sitting on a neon fill */

  --brand:        var(--magenta);
  --brand-2:      var(--cyan);
  --brand-accent: var(--lime);

  --border-hairline: rgba(255,255,255,0.08);
  --border-soft:     rgba(255,255,255,0.12);
  --border-strong:   rgba(255,255,255,0.18);
  --border-neon:     rgba(255,45,142,0.55);

  /* Signature neon gradient — use intentionally, never as filler */
  --grad-neon: linear-gradient(100deg, var(--magenta) 0%, var(--violet) 48%, var(--cyan) 100%);
  --grad-spotlight: radial-gradient(60% 80% at 50% 0%, rgba(255,45,142,0.18) 0%, rgba(21,230,240,0.06) 45%, transparent 75%);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: "Geist", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-text: "Geist", "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;

  /* Type scale (px / line-height / tracking) */
  --fs-display-2xl: 72px;  --lh-display-2xl: 1.04; --tr-display-2xl: -0.03em;
  --fs-display-xl:  56px;  --lh-display-xl:  1.06; --tr-display-xl:  -0.025em;
  --fs-display-lg:  44px;  --lh-display-lg:  1.08; --tr-display-lg:  -0.022em;
  --fs-h1:          36px;  --lh-h1:          1.12; --tr-h1:          -0.02em;
  --fs-h2:          28px;  --lh-h2:          1.18; --tr-h2:          -0.015em;
  --fs-h3:          22px;  --lh-h3:          1.25; --tr-h3:          -0.01em;
  --fs-h4:          18px;  --lh-h4:          1.35; --tr-h4:          -0.005em;
  --fs-body-lg:     18px;  --lh-body-lg:     1.55;
  --fs-body:        16px;  --lh-body:        1.55;
  --fs-body-sm:     14px;  --lh-body-sm:     1.5;
  --fs-caption:     13px;  --lh-caption:     1.4;
  --fs-overline:    12px;  --lh-overline:    1.2;  --tr-overline:    0.14em;
  --fs-mono:        14px;  --lh-mono:        1.5;

  /* Weights */
  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --sp-0:0; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;

  /* ============================================================
     ELEVATION — shadows + neon glows
     On dark, depth comes from a faint top light-border + drop shadow;
     emphasis comes from neon GLOW rather than heavier shadow.
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,0.7);
  --glow-magenta: 0 0 0 1px rgba(255,45,142,0.35), 0 8px 32px -4px var(--magenta-glow);
  --glow-cyan:    0 0 0 1px rgba(21,230,240,0.30), 0 8px 32px -4px var(--cyan-glow);
  --glow-lime:    0 0 0 1px rgba(198,255,61,0.30), 0 8px 28px -4px var(--lime-glow);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via class)
   ============================================================ */
.ds-display-2xl { font-family:var(--font-sans); font-size:var(--fs-display-2xl); line-height:var(--lh-display-2xl); letter-spacing:var(--tr-display-2xl); font-weight:var(--w-bold); color:var(--fg-1); }
.ds-display-xl  { font-family:var(--font-sans); font-size:var(--fs-display-xl);  line-height:var(--lh-display-xl);  letter-spacing:var(--tr-display-xl);  font-weight:var(--w-bold); color:var(--fg-1); }
.ds-display-lg  { font-family:var(--font-sans); font-size:var(--fs-display-lg);  line-height:var(--lh-display-lg);  letter-spacing:var(--tr-display-lg);  font-weight:var(--w-bold); color:var(--fg-1); }
.ds-h1 { font-family:var(--font-sans); font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--tr-h1); font-weight:var(--w-bold); color:var(--fg-1); }
.ds-h2 { font-family:var(--font-sans); font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2); font-weight:var(--w-semibold); color:var(--fg-1); }
.ds-h3 { font-family:var(--font-sans); font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--tr-h3); font-weight:var(--w-semibold); color:var(--fg-1); }
.ds-h4 { font-family:var(--font-sans); font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--tr-h4); font-weight:var(--w-semibold); color:var(--fg-1); }
.ds-body-lg { font-family:var(--font-text); font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); font-weight:var(--w-regular); color:var(--fg-2); }
.ds-body    { font-family:var(--font-text); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-regular); color:var(--fg-2); }
.ds-body-sm { font-family:var(--font-text); font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); font-weight:var(--w-regular); color:var(--fg-2); }
.ds-caption { font-family:var(--font-text); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--fg-3); }
.ds-overline { font-family:var(--font-sans); font-size:var(--fs-overline); line-height:var(--lh-overline); letter-spacing:var(--tr-overline); text-transform:uppercase; font-weight:var(--w-semibold); color:var(--fg-3); }
.ds-mono { font-family:var(--font-mono); font-size:var(--fs-mono); line-height:var(--lh-mono); color:var(--fg-2); }