/* ============================================================
   ATLAS — Design Tokens
   Single source of truth. Every value justified in Brandbook.
   ============================================================ */

@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Times New Roman');
  size-adjust: 105%;
  ascent-override: 90%;
}

:root {
  /* ---------- Colour: Ink & Court ---------------------------- */
  /* Direction A won: ink-black + signal-orange.
     Reference: Globetrotters' basketball spinning on a fingertip.
     Anti-VC-blue. Carries play (orange) + mastery (ink). */

  --ink:        #0B0B0C;   /* near-black, not pure  */
  --ink-2:      #15151A;   /* card bg on dark        */
  --ink-3:      #22232A;   /* hairline / divider     */
  --paper:      #F5F1E8;   /* warm off-white, not gallery-white */
  --paper-2:    #ECE6D6;   /* subtle tint            */
  --paper-3:    #D9D1BC;   /* warm border            */

  --signal:     #FF5B1F;   /* the ball. Orange that hums.   */
  --signal-hot: #FF7A3D;   /* hover / press lift            */
  --signal-deep:#C13F12;   /* on-paper text, AAA on paper   */

  --chalk:      #FFFFFF;
  --shadow:     #000000;

  /* Semantic — restrained. Not a candy shop. */
  --ok:    #2E7D5B;
  --warn:  #D49A1F;
  --err:   #B33A2A;
  --info:  var(--ink);     /* info uses ink, not blue. Deliberate. */

  /* ---------- Type ------------------------------------------ */
  --font-display: 'Fraunces', 'Fraunces-fallback', 'Times New Roman', serif;
  --font-sans:    'Geist', 'Söhne', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Modular scale — 1.250 minor third, anchored at 16px body */
  --fs-cap:    11px;
  --fs-sm:     14px;
  --fs-md:     16px;
  --fs-lg:     19px;
  --fs-h4:     24px;
  --fs-h3:     32px;
  --fs-h2:     44px;
  --fs-h1:     64px;
  --fs-display:clamp(72px, 11vw, 184px);

  --lh-tight:  0.95;
  --lh-snug:   1.1;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  --tr-tight:  -0.04em;   /* display    */
  --tr-snug:   -0.02em;   /* headlines  */
  --tr-norm:    0;
  --tr-wide:    0.08em;   /* eyebrow    */
  --tr-mono:    0.02em;

  /* ---------- Space — 8pt baseline -------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10:128px;
  --s-11:192px;

  /* ---------- Radii ----------------------------------------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 6px;
  --r-pill: 999px;

  /* ---------- Layout ---------------------------------------- */
  --col: 12;
  --gutter: clamp(16px, 2.2vw, 32px);
  --page-pad: clamp(20px, 4vw, 56px);
  --container: 1440px;

  /* ---------- Motion ---------------------------------------- */
  --ease-spin: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-1: 120ms;
  --t-2: 220ms;
  --t-3: 420ms;
  --t-slow: 1200ms;
}

/* ---------- Reset (small, opinionated) ---------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--signal); color: var(--ink); }

/* prefers-reduced-motion is honoured per-component */