/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — the single source of truth for the visual system.
   Change the brand here and the whole site follows.

   Light, minimal, violet-led. Every ink value below clears WCAG AA (4.5:1)
   on --c-bg, so no token in this file can produce unreadable text.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ────────────────────────────────────────────────────── */
  --c-bg:          #ffffff;
  --c-bg-alt:      #f7f7fa;   /* alternating sections */
  --c-bg-deep:     #f0f0f4;   /* footer, deepest light surface */
  --c-surface:     #ffffff;
  --c-surface-2:   #f2f2f6;

  /* ── Ink — contrast on --c-bg noted per step ─────────────────────── */
  --c-ink:         #0e0e12;   /* 19.0:1 */
  --c-ink-soft:    #3f3f4a;   /* 10.1:1 */
  --c-ink-mute:    #5e5e6b;   /*  6.2:1 */
  --c-ink-faint:   #737380;   /*  4.7:1 — the lightest text allowed */

  /* ── Brand ───────────────────────────────────────────────────────── */
  --c-accent:      #5b46e5;   /* bluish purple — 6.1:1 on white */
  --c-accent-hot:  #4733d4;
  --c-accent-soft: #eeebfd;   /* tint for fills and hovers */
  --c-on-accent:   #ffffff;
  --c-on-ink:      #ffffff;   /* text sitting on an ink-filled surface */

  --c-signal:      #157a52;   /* success — 5.3:1 */
  --c-alert:       #d23b3b;   /* error  — 4.6:1 */

  /* ── Hairlines & glass ───────────────────────────────────────────── */
  --c-line:        rgb(14 14 18 / 0.10);
  --c-line-strong: rgb(14 14 18 / 0.20);
  --c-glass:       rgb(255 255 255 / 0.76);

  /* ── Type ────────────────────────────────────────────────────────── */
  --f-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale — clamp(min, preferred, max) */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --t-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --t-2xl:  clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
  --t-3xl:  clamp(2.75rem, 1.5rem + 5.6vw, 7rem);

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  --ls-tight: -0.035em;
  --ls-snug:  -0.02em;
  --ls-wide:  0.16em;

  /* ── Space ───────────────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  /* Minimalism is mostly whitespace — sections breathe wider than the dark
     version did, because there is no glow doing the separating. */
  --section-y: clamp(5.5rem, 3rem + 10vw, 12rem);

  /* ── Structure ───────────────────────────────────────────────────── */
  --shell: 78rem;
  --shell-narrow: 52rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 4.5rem;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-full: 999px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --e-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 620ms;

  /* ── Elevation — restrained; hairlines do most of the separating ─── */
  --sh-1: 0 1px 2px rgb(14 14 18 / 0.05);
  --sh-2: 0 12px 32px -16px rgb(14 14 18 / 0.20);

  /* ── Game palette (read by the canvas renderers, which cannot use
         custom properties cheaply — keep these in sync with the JS) ─── */
  --g-bg: #fafafc;
}