/* ═══════════════════════════════════════════════════════════
   VMG · Design Tokens
   Source of truth: voodoomediagroup.com (css/shared.css :root)
   Drop this file into a sibling site to inherit VMG's visual
   language. Single :root block — no resets, no chrome, no JS.

   USAGE
     <link rel="stylesheet" href="vmg-tokens.css">
     then reference tokens: color: var(--ink-100);

   NOTES
   • Palette is declared HEX first, OKLCH second on purpose.
     Legacy browsers stop at the hex; modern browsers (last
     valid wins) get the wider-gamut OKLCH. Preserve this
     dual-declaration pattern if you extend the palette.
   • Fonts assume self-hosted variable woff2 files
     (Space Grotesk, JetBrains Mono). If the target site
     doesn't host them, the system fallbacks in --font-display
     / --font-mono will degrade gracefully — but for true
     visual parity, ship the same woff2 files and @font-face.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────
     COLOR · brand palette
     Cosmic deep-purple/violet system. Use --obsidian as the
     default surface, --hex-violet as the primary accent.
     ───────────────────────────────────────────────────────── */
  --hex-violet:       #842ABF;
  --hex-violet:       oklch(46% 0.208 304);
  --hex-violet-light: #B87CE8;
  --hex-violet-light: oklch(66.7% 0.163 304);

  --obsidian:         #050426;
  --obsidian:         oklch(10.5% 0.071 276);
  --midnight:         #080A40;
  --midnight:         oklch(16% 0.111 277);
  --royal:            #18298C;
  --royal:            oklch(28.4% 0.162 275);
  --sapphire:         #215BA6;
  --sapphire:         oklch(43.7% 0.144 256);

  /* COLOR · ink ramp (foreground on dark surfaces) */
  --ink-100:          #F4F3FA;
  --ink-100:          oklch(96.4% 0.01 286);
  --ink-70:           rgba(244, 243, 250, 0.70);
  --ink-70:           oklch(96.4% 0.01 286 / 0.7);
  --ink-50:           rgba(244, 243, 250, 0.50);
  --ink-50:           oklch(96.4% 0.01 286 / 0.5);
  --ink-30:           rgba(244, 243, 250, 0.30);
  --ink-30:           oklch(96.4% 0.01 286 / 0.3);
  --ink-15:           rgba(244, 243, 250, 0.15);
  --ink-15:           oklch(96.4% 0.01 286 / 0.15);
  --ink-08:           rgba(244, 243, 250, 0.08);
  --ink-08:           oklch(96.4% 0.01 286 / 0.08);

  /* COLOR · semantic */
  --alert-red:        #E5484D;
  --alert-red:        oklch(63% 0.19 25);
  --border-color:     var(--ink-15);

  /* ─────────────────────────────────────────────────────────
     GRADIENTS · brand-defining washes
     ───────────────────────────────────────────────────────── */
  --grad-cosmos:    linear-gradient(135deg, #050426 0%, #080A40 35%, #18298C 70%, #842ABF 100%);
  --grad-eclipse:   radial-gradient(circle at 30% 40%, #842ABF 0%, #18298C 35%, #080A40 70%, #050426 100%);
  --grad-aurora:    linear-gradient(180deg, #050426 0%, #080A40 40%, #215BA6 85%, #842ABF 100%);
  --grad-violet:    linear-gradient(135deg, #842ABF 0%, #18298C 100%);
  --grad-midnight:  linear-gradient(180deg, #050426 0%, #080A40 100%);

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY · font families
     --font-display: headings, body, UI
     --font-mono:    eyebrows, labels, nav, buttons (UPPERCASE
                     with 0.15–0.2em letter-spacing)
     ───────────────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* TYPOGRAPHY · type scale (clamp-based, fluid) */
  --f-display-xl: clamp(3rem, 9vw, 6.5rem);     /* hero display */
  --f-display-l:  clamp(2.25rem, 5.5vw, 4rem);  /* section titles */
  --f-h1:         clamp(1.75rem, 4vw, 2.75rem);
  --f-h2:         clamp(1.375rem, 2.75vw, 1.875rem);
  --f-h3:         1.25rem;
  --f-body:       1rem;
  --f-small:      0.875rem;
  --f-micro:      0.75rem;                      /* eyebrows, mono labels */

  /* ─────────────────────────────────────────────────────────
     SPACING · t-shirt scale, used for padding/margin/gap
     ───────────────────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* ─────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────── */
  --section-max: 1280px;

  /* ─────────────────────────────────────────────────────────
     MOTION · easings + duration scale
     ───────────────────────────────────────────────────────── */
  --ease-out-luxe:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out-luxe: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 200ms;
  --dur-base:  400ms;
  --dur-slow:  700ms;
  --dur-luxe:  1200ms;

  /* ─────────────────────────────────────────────────────────
     UI HINTS · tell the browser this is a dark, violet-accented
     UI. Native form controls, scrollbars, autofill pick this up.
     ───────────────────────────────────────────────────────── */
  color-scheme: dark;
  accent-color: var(--hex-violet);
}