/* tokens.css — design tokens: color, type, space, motion.
   Aesthetic: quiet editorial / reading-room. Warm paper & ink, single ochre accent. */

:root {
  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-read: "Literata", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 64ch;          /* reading line length */
  --leading-read: 1.7;
  --leading-tight: 1.15;

  /* fluid-ish type scale */
  --fs-display: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  --fs-kicker: 0.8rem;
  --fs-body: 1.225rem;
  --fs-gloss: 1.0rem;
  --fs-meta: 0.78rem;

  /* ---- Space ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.25rem;
  --sp-7: 3.5rem;
  --sp-8: 5.5rem;

  /* ---- Motion ---- */
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 360ms;
  --ease-spring: cubic-bezier(.2, .9, .25, 1);
  --ease-out: cubic-bezier(.2, .6, .2, 1);

  /* ---- Color: light (warm paper & ink) ---- */
  --paper: #F7F4ED;
  --paper-raised: #FCFAF4;
  --ink: #1A1916;
  --muted: #6E6A5F;
  --hairline: #E4DFD3;
  --accent: #C2410C;        /* burnt ochre — marks the live action only */
  --accent-soft: rgba(194, 65, 12, 0.10);
  --success: #5B7A52;       /* muted sage */
  --success-soft: rgba(91, 122, 82, 0.12);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16140F;
    --paper-raised: #1E1B15;
    --ink: #EDE8DB;
    --muted: #94907F;
    --hairline: #2A2722;
    --accent: #E0641F;          /* slightly lifted ochre for dark ground */
    --accent-soft: rgba(224, 100, 31, 0.14);
    --success: #87A37C;
    --success-soft: rgba(135, 163, 124, 0.16);
  }
}

/* explicit theme override via [data-theme] (used by tiny pref toggle) */
:root[data-theme="light"] {
  --paper: #F7F4ED; --paper-raised: #FCFAF4; --ink: #1A1916; --muted: #6E6A5F;
  --hairline: #E4DFD3; --accent: #C2410C; --accent-soft: rgba(194,65,12,.10);
  --success: #5B7A52; --success-soft: rgba(91,122,82,.12);
}
:root[data-theme="dark"] {
  --paper: #16140F; --paper-raised: #1E1B15; --ink: #EDE8DB; --muted: #94907F;
  --hairline: #2A2722; --accent: #E0641F; --accent-soft: rgba(224,100,31,.14);
  --success: #87A37C; --success-soft: rgba(135,163,124,.16);
}