/* ============================================================
   TOKENS — VOLT design system variables
   ============================================================ */
:root {
  /* ── Color palette ── */
  --clr-bg:           #08090f;
  --clr-surface:      #0f1118;
  --clr-surface-2:    #161b28;
  --clr-surface-3:    #1d2336;
  --clr-border:       rgba(255,255,255,0.06);
  --clr-border-2:     rgba(255,255,255,0.12);

  /* ── Accent colors ── */
  --clr-accent:       #b4ff3c;
  --clr-accent-dim:   rgba(180,255,60,0.10);
  --clr-accent-glow:  rgba(180,255,60,0.22);
  --clr-accent-2:     #ff4560;
  --clr-accent-3:     #38c8ff;

  /* ── Text ── */
  --clr-text:         #eef2fc;
  --clr-text-2:       #7a8aac;
  --clr-text-3:       #3a4460;

  /* ── Typography ── */
  --font-display:     'Syne', sans-serif;
  --font-body:        'Instrument Sans', sans-serif;
  --font-mono:        'Space Mono', monospace;

  /* ── Type scale ── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */

  /* ── Font weights ── */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Border radii ── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Layout ── */
  --header-h:   64px;
  --container:  1300px;

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
  --dur-enter:  400ms;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);

  /* ── Legacy aliases (for JS compatibility) ── */
  --color-primary:      var(--clr-accent);
  --color-bg:           var(--clr-bg);
  --color-surface:      var(--clr-surface);
  --color-surface-2:    var(--clr-surface-2);
  --color-border:       var(--clr-border);
  --color-text:         var(--clr-text);
  --color-text-muted:   var(--clr-text-2);
  --color-header-bg:    var(--clr-bg);
  --color-success:      var(--clr-accent);
  --color-error:        var(--clr-accent-2);
  --font-sans:          var(--font-body);
  --header-height:      var(--header-h);
  --radius-md:          6px;
  --radius-lg:          12px;
  --radius-full:        9999px;
  --transition-fast:    120ms ease;
  --transition-normal:  220ms ease;
  --transition-slow:    380ms ease;
  --max-width:          var(--container);
  --text-xs:            0.75rem;
  --text-sm:            0.8125rem;
  --text-base:          1rem;
  --text-lg:            1.125rem;
  --text-xl:            1.25rem;
  --text-2xl:           1.5rem;
  --text-3xl:           1.875rem;
  --text-4xl:           2.25rem;
  --text-5xl:           3rem;
  --font-bold:          700;
  --font-medium:        500;
  --font-semibold:      600;
}