/* ============================================================
   MOIRA SOLUTIONS B.V. — Design Tokens (single source of truth)
   Dark-only, immersive. Drop-in for any HTML artifact:
     <link rel="stylesheet" href="tokens.css">
   Derived from the MOIRA wordmark: metallic gold, chrome/silver,
   royal-purple glow, near-black violet canvas.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* ---------- Canvas (near-black violet) ---------- */
  --bg:            #0B0610;   /* page background */
  --bg-elev:       #140B1E;   /* raised panels / sections */
  --surface:       #18102A;   /* solid cards */
  --surface-glass: rgba(255,255,255,0.045);  /* glass cards over the canvas */
  --bg-glow:       #5B2A86;   /* royal-purple radial for hero/section glows */

  /* ---------- Metallic GOLD ramp (primary brand accent) ---------- */
  --gold-100: #F6E4A8;        /* highlight */
  --gold-300: #E8C879;
  --gold-500: #D4A93E;        /* CORE brand gold — buttons, links, key accents */
  --gold-700: #A97C28;        /* deep edge */
  --grad-gold: linear-gradient(168deg, #F6E4A8 0%, #E8C879 28%, #D4A93E 58%, #A97C28 100%);

  /* ---------- CHROME / silver-white ramp (secondary metallic) ---------- */
  --chrome-100: #FFFFFF;
  --chrome-300: #E7E8EE;
  --chrome-500: #C7CAD4;
  --chrome-700: #9AA0AE;
  --grad-chrome: linear-gradient(180deg, #FFFFFF 0%, #C7CAD4 60%, #9AA0AE 100%);

  /* ---------- Royal PURPLE ramp (accent + glow) ---------- */
  --purple-300: #B98AE0;
  --purple-500: #8A3FCB;      /* vibrant accent */
  --purple-700: #5B2A86;
  --purple-900: #2C1247;

  /* ---------- Text ---------- */
  --fg:        #F4F2F7;       /* primary text (warm white) */
  --fg-muted:  #B9B2C7;       /* secondary text (lavender-gray) */
  --fg-subtle: #7E7690;       /* captions, eyebrows, meta */
  --fg-gold:   var(--gold-500);

  /* ---------- Lines & borders ---------- */
  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-gold:   rgba(212,169,62,0.35);
  --hairline-gold: linear-gradient(90deg, transparent, rgba(212,169,62,0.6), transparent);

  /* ---------- Semantic (kept minimal for marketing) ---------- */
  --success: #3BD18A;
  --warning: #E8C879;
  --danger:  #FF6B6B;
  --info:    #8A3FCB;

  /* ---------- Typography ---------- */
  --font-display: 'Sora', 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-mono:    'Space Grotesk', ui-monospace, monospace;

  --fs-display-xl: clamp(2.75rem, 6.2vw, 5.5rem);
  --fs-display:    clamp(2.25rem, 4.6vw, 4rem);
  --fs-h1:         clamp(2rem, 3.4vw, 3rem);
  --fs-h2:         clamp(1.5rem, 2.4vw, 2.25rem);
  --fs-h3:         1.5rem;
  --fs-h4:         1.25rem;
  --fs-body-lg:    1.125rem;
  --fs-body:       1rem;
  --fs-sm:         0.875rem;
  --fs-eyebrow:    0.75rem;

  --lh-tight: 1.05;  --lh-snug: 1.3;  --lh-normal: 1.6;
  --tracking-eyebrow: 0.18em;
  --tracking-tight: -0.02em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px; --sp-40:160px;
  --section-y: clamp(80px, 12vw, 160px);

  /* ---------- Radius ---------- */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;

  /* ---------- Layout ---------- */
  --content-max: 1280px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---------- Elevation & glow ---------- */
  --shadow-card: 0 24px 60px -24px rgba(0,0,0,0.75);
  --glow-gold:   0 0 40px rgba(212,169,62,0.28);
  --glow-purple: 0 0 90px rgba(138,63,203,0.40);
  --ring-focus:  0 0 0 3px rgba(138,63,203,0.55);

  /* ---------- Motion ---------- */
  --ease-lux:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast:200ms; --dur-base:400ms; --dur-slow:700ms; --dur-reveal:1000ms;
}