/* ============================================================
   TOKENS — the whole design system in one place.
   Change a color/font/spacing here and it propagates everywhere.
   ============================================================ */

:root {
  /* ---- palette: warm charcoal + bone + signal orange ---- */
  --bg0: #0b0b0c;              /* page */
  --bg1: #101012;              /* raised panels */
  --bg2: #17171a;              /* hover surfaces */
  --ink: #ede9e0;              /* bone white */
  --ink2: #a6a099;             /* dimmed */
  --ink3: #6f6a63;             /* faint */
  --line: rgba(237, 233, 224, 0.13);
  --line-strong: rgba(237, 233, 224, 0.28);
  --acc: #ff4e00;              /* international orange — tally light */
  --acc-ink: #ffb59a;          /* orange-tinted text on dark */
  --acc-soft: rgba(255, 78, 0, 0.13);
  --amber: #ffb300;
  --ok: #3ecf8e;               /* “agent active” green */
  --rec: #ff3b30;              /* REC dot */

  /* ---- typography ---- */
  --font-display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  /* fluid type scale */
  --fs-hero: clamp(2.6rem, 8.5vw, 7.8rem);
  --fs-h2: clamp(2rem, 6vw, 5.2rem);
  --fs-h2-xl: clamp(2.4rem, 7.5vw, 6.6rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.7rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-mono: clamp(0.68rem, 0.85vw, 0.8rem);

  /* ---- spacing / layout ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3.5rem;
  --space-5: 6rem;
  --space-6: clamp(5rem, 12vw, 11rem);   /* between sections */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1480px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-snap: cubic-bezier(0.83, 0, 0.17, 1);
  --dur: 0.9s;

  /* ---- chrome ---- */
  --hud-inset: 14px;
  --radius: 4px;
}

@media (max-width: 720px) {
  :root {
    --hud-inset: 8px;
  }
}