/* ── tokens.css — Two Truths · "First Light" ──────────────────────────────
   docs/new/03-VISUAL-DESIGN.md is the spec. Six colour tokens, plus the
   accent's separate text weight.

   The grammar: relative life renders on warm ground, ultimate truth in cool
   sky, and the two share every screen. Light mode is ground-dominant with
   sky panels; dark mode inverts it. The horizon is identical in both.

   Light is the default. Dark only on explicit toggle (`tt-theme`). Never
   OS-driven — a reader who opens this at 6am should get dawn.            */

:root {
  /* ── the six ──────────────────────────────────────────────────────── */
  --sky:            #1C2733;   /* pre-dawn blue-slate */
  --sky-high:       #33475C;   /* lifted sky — gradients, hover on ultimate */
  --ground:         #F5EFE4;   /* warm undyed linen */
  --ground-deep:    #E4D8C3;   /* card edges, dividers on ground */
  --first-light:    #E8B15C;   /* the horizon. LINES, RINGS, GLOWS ONLY */
  --ink:            #232019;   /* body text on ground */

  /* The accent's text weight. --first-light on --ground is ~1.6:1 and must
     never carry type; this clears AA at ~5.4:1. See 03 §Accent contrast. */
  --first-light-ink: #8A5A12;

  /* ── derived surfaces ─────────────────────────────────────────────── */
  --page:        var(--ground);
  --page-2:      #FBF7F0;
  --panel:       var(--sky);          /* ultimate-truth surfaces */
  --panel-ink:   #EDE7DA;             /* text on sky */
  --card:        #FFFDF9;
  --line:        var(--ground-deep);
  --line-strong: #CDBEA3;
  --ink-2:       #564E3F;             /* secondary text — 7.0:1 on ground */
  --ink-3:       #6E6553;             /* tertiary — 4.9:1, never below 14px */
  --accent:      var(--first-light-ink);   /* links and accented type */
  --rule:        var(--first-light);       /* the horizon line itself */
  --focus:       var(--first-light-ink);
  --glow:        rgba(232, 177, 92, .38);

  /* ── type ─────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Source Serif 4', 'Iowan Old Style', Charter, Georgia, serif;
  --font-util:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* 15 / 18 / 22 / 30 / 44 / 64 — fluid between the last three */
  --t-xs: .9375rem;
  --t-sm: 1rem;
  --t-base: 1.125rem;
  --t-md: 1.375rem;
  --t-lg: clamp(1.5rem, 1.15rem + 1.6vw, 1.875rem);
  --t-xl: clamp(1.95rem, 1.3rem + 2.9vw, 2.75rem);
  --t-2xl: clamp(2.4rem, 1.3rem + 4.6vw, 4rem);

  --leading-body: 1.7;
  --leading-tight: 1.18;
  --measure: 68ch;

  /* ── space (8px base) ─────────────────────────────────────────────── */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;   --s8: 8rem;
  --section: clamp(4rem, 2rem + 8vw, 8rem);
  --wrap: 1120px;

  /* ── form ─────────────────────────────────────────────────────────── */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px;
  --stroke: 1.5px;                      /* the site's one stroke weight */
  --sh-1: 0 1px 2px rgba(35, 32, 25, .05), 0 3px 14px rgba(35, 32, 25, .05);
  --sh-2: 0 10px 40px rgba(35, 32, 25, .10);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --breath: 7s;                         /* inhale 3 · hold 1 · exhale 3 */

  color-scheme: light;
}

/* ── dark: sky-dominant, ground cards floating in it ──────────────────── */
:root[data-theme='dark'] {
  --page:        var(--sky);
  --page-2:      #16202B;
  --panel:       #141D26;
  --panel-ink:   #EDE7DA;
  --card:        #22303E;
  --line:        rgba(237, 231, 218, .13);
  --line-strong: rgba(237, 231, 218, .24);
  --ink:         #EDE7DA;
  --ink-2:       #B9B3A6;              /* 7.4:1 on --sky */
  --ink-3:       #948D80;              /* 4.8:1 */
  --accent:      var(--first-light);   /* clears AA on sky at ~7:1 */
  --focus:       var(--first-light);
  --glow:        rgba(232, 177, 92, .30);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .30), 0 3px 14px rgba(0, 0, 0, .22);
  --sh-2: 0 10px 40px rgba(0, 0, 0, .38);

  color-scheme: dark;
}

/* Sky panels inside a light page invert their local ink so the accent stays
   AA-legal on both surfaces. This is what lets `.sky` be dropped anywhere. */
.sky {
  --ink: var(--panel-ink);
  --ink-2: #C3BCAD;
  --ink-3: #9C9587;
  --accent: var(--first-light);
  --focus: var(--first-light);
  --card: #26333F;
  --line: rgba(237, 231, 218, .14);
  --line-strong: rgba(237, 231, 218, .26);
  background: var(--panel);
  color: var(--ink);
}

/* ── fonts ────────────────────────────────────────────────────────────────
   Self-hosted, subset, no third-party request ever (CSP is `default-src
   'self'`). `size-adjust` on the fallbacks keeps swap from shifting layout.
   Run `node scripts/fetch-fonts.mjs` to populate /fonts.                  */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 350 550;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-var.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E;
}