/* ============================================================
 * DESIGN TOKENS — the single re-skin surface.
 * Replace the values here (and letter.css / assets/epub.css for
 * the letters themselves) to re-theme the whole app. Nothing in
 * app.css or the JS knows a color by name.
 * ============================================================ */

:root {
  /* -- palette: evening correspondence ---------------------- */
  --dusk-1: #171a2e;            /* page ground, top */
  --dusk-2: #20243f;            /* page ground, bottom */
  --paper: #f3ecdd;             /* letter cards */
  --paper-edge: #e6dcc6;        /* card borders / deckle */
  --ink: #2a2416;               /* text on paper */
  --ink-soft: #5c5340;          /* secondary text on paper */
  --moon: #d7d3e4;              /* primary text on dusk */
  --moon-soft: #8d8aa5;         /* secondary text on dusk */
  --brass: #b8863b;             /* accent, focus, progress */
  --brass-soft: #8a6a35;
  --slate: #55597a;             /* sealed / disabled */
  --wax: #8c2b2b;               /* new-arrival seal */
  --wax-bright: #a83a34;

  /* -- type --------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "Courier Prime", "Courier New", monospace;

  /* modular scale, 1.25 on a 15px base */
  --text-xs: 0.75rem;      /* 12 — postmarks, captions */
  --text-sm: 0.8667rem;    /* 13 — meta lines */
  --text-md: 1rem;         /* 15 — interface body */
  --text-lg: 1.25rem;      /* ~19 — letter body, card titles */
  --text-xl: 1.5625rem;    /* ~23 — month names */
  --text-2xl: 1.9531rem;   /* ~29 — app wordmark, letter titles */

  /* -- space (4px grid) -------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-16: 4rem;

  /* -- shape & depth ----------------------------------------- */
  --radius-card: 0.375rem;
  --radius-stamp: 50%;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.35), 0 6px 18px rgb(0 0 0 / 0.25);
  --shadow-sheet: 0 -4px 40px rgb(0 0 0 / 0.5);

  /* -- motion ------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 200ms;
  --t-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-slow: 0ms;
  }
}