/* tokens.css — design tokens. Every size, color, spacing value lives here.
   House style (spec §8): Fraunces display, EB Garamond body, IBM Plex Mono labels.
   Dark editorial ground, amber + teal accents. Editorial 1.333 type scale.
   Dark is the designed default; a tuned light palette honors prefers-color-scheme. */

:root {
  color-scheme: dark light;

  /* — Font stacks. Editorial faces if present, else high-quality system fallbacks
       (no external calls — offline-first, spec §8). Self-hosting woff2 is a fast-follow. */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body:    'EB Garamond', 'Iowan Old Style', Palatino, Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* — Reader font-size multiplier hook (typo §Reader controls). */
  --fs-scale: 1;

  /* — Editorial type scale, 1.333 (major fourth) from an 18px base. */
  --size-xs:   0.79rem;   /* ~12.6px — fine print */
  --size-sm:   0.84rem;   /* ~13.5px — labels, mono metadata */
  --size-base: 1rem;      /* 18px (set on :root) — body */
  --size-md:   1.18rem;   /* lead / intro */
  --size-lg:   1.58rem;   /* H3 / widget titles */
  --size-xl:   2.10rem;   /* H2 / act titles */
  --size-2xl:  2.80rem;   /* H1 */
  --size-3xl:  3.73rem;   /* hero / large act numerals */

  --lh-body:    1.55;
  --lh-heading: 1.08;
  --lh-subhead: 1.2;
  --lh-label:   1.3;

  /* — Spacing rhythm (TeX glue model: one base, all derived). */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 2rem;
  --sp-xl: 4rem;
  --sp-2xl: 6.5rem;

  /* — Measure. */
  --measure: 66ch;
  --measure-narrow: 54ch;

  /* — Dark editorial ground (designed default). Warm charcoal, not #000. */
  --bg:            #15130f;
  --bg-1:          #1d1a14;
  --bg-2:          #262119;
  --bg-3:          #2f2a20;
  --text:          #ece7db;   /* warm off-white — ~13:1 on --bg */
  --text-secondary:#aba291;
  --text-muted:    #6f6757;
  --rule:          #36302541; /* hairline rules, low-contrast */
  --rule-solid:    #393223;

  /* — Accents (slightly desaturated for dark, spec §8). */
  --amber:         #e0a33e;
  --amber-soft:    #e0a33e26;
  --amber-line:    #e0a33e66;
  --teal:          #56b3a6;
  --teal-soft:     #56b3a626;
  --teal-line:     #56b3a666;

  /* — Semantic accent roles. */
  --accent:        var(--amber);   /* primary editorial accent */
  --accent-2:      var(--teal);
  --read-accent:   var(--teal);    /* reads = address/test */
  --write-accent:  var(--amber);   /* writes = transition */

  /* — Shape & motion. */
  --radius:    10px;
  --radius-sm: 6px;
  --border:    1px solid var(--rule-solid);
  --shadow:    0 1px 0 #00000040, 0 10px 30px -18px #00000080;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur:       420ms;
  --dur-fast:  200ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:             #f4efe4;
    --bg-1:           #fbf8f0;
    --bg-2:           #efe8d8;
    --bg-3:           #e7dec9;
    --text:           #2a2418;
    --text-secondary: #5c5340;
    --text-muted:     #8a8069;
    --rule:           #2a241814;
    --rule-solid:     #d8cfb8;
    --amber:          #b97d12;
    --teal:           #2f8276;
  }
}

/* Reduced-motion: collapse durations so transitions become instant snaps. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-fast: 0ms; }
}