/* ══════════════════════════════════════════════════════════════
   TOKENS — every colour, size and rhythm value lives here.
   Change the design globally by editing this file only.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── TYPEFACES ─────────────────────────────────────────────── */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── TYPE SCALE (fluid) ────────────────────────────────────── */
  --t-hero:   clamp(3.6rem, 15.5vw, 15rem);
  --t-xxl:    clamp(2.6rem, 7.4vw, 6.4rem);
  --t-xl:     clamp(2rem, 4.4vw, 3.6rem);
  --t-lg:     clamp(1.4rem, 2.3vw, 2rem);
  --t-md:     clamp(1.05rem, 1.35vw, 1.28rem);
  --t-body:   clamp(0.98rem, 1.05vw, 1.1rem);
  --t-sm:     0.84rem;
  --t-xs:     0.72rem;
  --t-micro:  0.64rem;

  /* ── TRACKING ──────────────────────────────────────────────── */
  --tr-tight:  -0.045em;
  --tr-snug:   -0.02em;
  --tr-wide:    0.14em;
  --tr-wider:   0.26em;

  /* ── 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: 9rem;

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --rail-w: 4.25rem;
  --bar-h:  3.25rem;
  --section-y: clamp(5.5rem, 11vw, 11rem);
  --maxw: 100rem;

  /* ── STRUCTURE ─────────────────────────────────────────────── */
  --hair: 1px;
  --radius: 0px;          /* Marathon is hard-edged. Keep at 0. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sharp: cubic-bezier(0.83, 0, 0.17, 1);
  --dur: 0.55s;
}

/* ══════════════════════════════════════════════════════════════
   THEME — VOID (default, dark HUD)
   ══════════════════════════════════════════════════════════════ */
:root,
[data-theme="void"] {
  --bg:        #0A0A0B;
  --bg-2:      #0F0F11;
  --surface:   #141417;
  --surface-2: #1B1B1F;

  --ink:       #EDEAE3;
  --ink-dim:   #8B8B85;
  --ink-faint: #75746E;

  --line:      rgba(237, 234, 227, 0.145);
  --line-soft: rgba(237, 234, 227, 0.07);
  --line-hard: rgba(237, 234, 227, 0.32);

  --flare:     #FF4A16;   /* primary accent */
  --flare-ink: #0A0A0B;   /* text on flare */
  --cyan:      #38E8DC;
  --acid:      #D8FF47;
  --error:     #FF6B6B;
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238B8B85' stroke-width='1.4'/%3E%3C/svg%3E");

  --grain-op:  0.055;
  --scan-op:   0.012;
  --hatch:     rgba(237, 234, 227, 0.055);
  --shade:     rgba(0, 0, 0, 0.55);
}

/* ══════════════════════════════════════════════════════════════
   THEME — BONE (light, key-art / print register)
   ══════════════════════════════════════════════════════════════ */
[data-theme="bone"] {
  --bg:        #E6E2D7;
  --bg-2:      #DFDACD;
  --surface:   #D8D2C3;
  --surface-2: #CFC8B7;

  --ink:       #0D0D0E;
  --ink-dim:   #5D5B53;
  --ink-faint: #767368;

  --line:      rgba(13, 13, 14, 0.2);
  --line-soft: rgba(13, 13, 14, 0.09);
  --line-hard: rgba(13, 13, 14, 0.45);

  --flare:     #E23A08;
  --flare-ink: #F4F1E8;
  --cyan:      #007D77;
  --acid:      #6E7A00;
  --error:     #B3261E;
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235D5B53' stroke-width='1.4'/%3E%3C/svg%3E");

  --grain-op:  0.09;
  --scan-op:   0.008;
  --hatch:     rgba(13, 13, 14, 0.07);
  --shade:     rgba(13, 13, 14, 0.14);
}

/* Honour OS preference on first visit (JS overrides once chosen). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme-locked]) { color-scheme: light; }
}