/* ==========================================================================
   CINEXIS — Design Tokens  ·  "Prism Noir"
   Derived from the CINEXIS mark: a faceted X split magenta-left / cyan-right
   with a white starburst core, on pure black. The spectral split is treated
   as a LIGHT SOURCE, not decoration — colour arrives as edge-light and glow.
   ========================================================================== */

:root {
  /* ---- Surfaces: an OLED cinema void ---------------------------------- */
  --void:        #000000;
  --surface:     #0A0912;
  --surface-2:   #12101F;
  --surface-3:   #1B1830;
  --surface-4:   #262040;
  --scrim:       rgba(0, 0, 0, .72);

  /* ---- Hairlines ------------------------------------------------------- */
  --hairline:        rgba(255, 255, 255, .08);
  --hairline-strong: rgba(255, 255, 255, .14);

  /* ---- Brand: lifted straight off the logo ----------------------------- */
  --magenta:   #C13FE0;
  --violet:    #7C3AED;
  --azure:     #1E90D6;
  --cyan:      #29B6F6;
  --magenta-d: #7A1E93;
  --cyan-d:    #0E4E78;

  /* The signature gradient — the X, unrolled */
  --prism: linear-gradient(100deg, #C13FE0 0%, #7C3AED 45%, #1E90D6 75%, #29B6F6 100%);
  --prism-soft: linear-gradient(100deg, rgba(193,63,224,.20) 0%, rgba(124,58,237,.16) 45%, rgba(41,182,246,.20) 100%);
  --prism-v: linear-gradient(180deg, #C13FE0 0%, #7C3AED 50%, #29B6F6 100%);

  /* ---- Functional accents ---------------------------------------------- */
  --gold:   #FBBF24;   /* Most Popular · Express Evaluation */
  --gold-d: #78560A;
  --mint:   #34D399;   /* paid · approved · published */
  --mint-d: #0C5140;
  --rose:   #FB7185;   /* error · churn · rejected */
  --rose-d: #6E1B2B;
  --amber:  #F59E0B;   /* pending · under evaluation */
  --sky:    #38BDF8;   /* info */

  /* ---- Ink: all ≥4.5:1 on --surface ------------------------------------ */
  --ink:    #F7F7FB;
  --ink-2:  #B7B5C6;
  --ink-3:  #7E7C90;
  --ink-on-accent: #0A0912;

  /* ---- Type ------------------------------------------------------------- */
  --font-brand: 'Michroma', 'Eurostile Extended', 'Bank Gothic', 'Arial Black', sans-serif;
  --font-head:  'Chakra Petch', 'Rajdhani', 'Oswald', 'Helvetica Neue', sans-serif;
  --font-body:  'Manrope', 'Avenir Next', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --t-3xl: 34px;  --t-2xl: 27px;  --t-xl: 22px;  --t-lg: 19px;
  --t-md: 16px;   --t-sm: 14px;   --t-xs: 12.5px; --t-2xs: 11px;

  --lh-tight: 1.15;  --lh-snug: 1.35;  --lh-body: 1.55;
  --tr-brand: .16em;  --tr-head: -.01em;  --tr-eyebrow: .22em;

  /* ---- Space: 4-point scale --------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px;

  /* ---- Radius ------------------------------------------------------------ */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-pill: 999px;

  /* ---- Elevation: glow, not drop shadow ---------------------------------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.6);
  --sh-2: 0 6px 20px rgba(0,0,0,.55);
  --sh-3: 0 18px 48px rgba(0,0,0,.7);
  --glow-magenta: 0 0 28px rgba(193, 63, 224, .38);
  --glow-cyan:    0 0 28px rgba(41, 182, 246, .34);
  --glow-prism:   0 0 32px rgba(124, 58, 237, .30), 0 0 64px rgba(193, 63, 224, .16);

  /* ---- Motion ------------------------------------------------------------ */
  --fast: 160ms;  --base: 220ms;  --slow: 420ms;  --cine: 720ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .9, .4);

  /* ---- Z-scale ----------------------------------------------------------- */
  --z-nav: 10;  --z-sheet: 20;  --z-player: 30;  --z-toast: 40;  --z-modal: 50;

  /* ---- Device --------------------------------------------------------------
     Mobile-only POC. 390×844 = iPhone 14/15 logical viewport.               */
  --app-w: 390px;
  --app-h: 844px;
  --tap: 44px;              /* minimum touch target */
  --nav-h: 62px;            /* bottom tab bar */
  --safe-b: 20px;           /* home-indicator gutter */
}

/* Film grain — a tiled SVG noise tile, used as a texture overlay everywhere.
   Kills the flat plastic look that dark UIs default to. */
:root {
  --grain: 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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 1ms; --base: 1ms; --slow: 1ms; --cine: 1ms; }
}