/* public/css/tokens.css
 *
 * The design tokens, in one place.
 *
 * ── Why this file exists ──────────────────────────────────────────────────
 * These values previously lived in three states at once: a :root block inline
 * in index.html, a hand-copied duplicate at the top of css/legal.css whose own
 * comment admitted it was a copy ("Tokens are copied verbatim ... so the pages
 * cannot drift"), and nowhere at all for the five member-portal pages, which
 * had simply been built in Georgia on #faf7f2 and never touched the palette.
 *
 * A comment asking people not to let files drift is not a mechanism. This is:
 * one file, imported everywhere, plus scripts/check-design-tokens.mjs in CI to
 * fail the build if index.html's inline copy stops matching.
 *
 * ── Why index.html still inlines its own copy ─────────────────────────────
 * The landing page inlines ALL of its CSS deliberately -- it is the page that
 * has to paint fast on a cold phone connection, and an external stylesheet is a
 * render-blocking round trip. Making its colours depend on a second request
 * would mean a flash of unstyled parchment, or worse: every var() resolves to
 * nothing and the page renders as black-on-white until the file lands. So the
 * inline copy stays, and CI compares the two instead of trusting a comment.
 *
 * ── The palette ───────────────────────────────────────────────────────────
 * It is a manuscript palette, not a brand palette, and the names say what each
 * value is FOR rather than what colour it is:
 *
 *   parchment / panel / recess   the three depths of the page surface
 *   ink / ink-faded              body text and its quieter second voice
 *   rubric                       the red used in manuscripts for headings,
 *                                initials and instructions. It is the accent,
 *                                and it is also the only "danger" red we have.
 *   gilt                         gold leaf: rules, flourishes, dividers
 *   marian                       the blue reserved for Our Lady, used for
 *                                informational notes and nothing else
 */

:root {
  color-scheme: light;

  /* ── Surface ── */
  --parchment: #f6efe1;
  --panel: #fbf7ed;
  --recess: #efe5d0;

  /* ── Text ── */
  --ink: #25201a;
  --ink-faded: #6e6354;

  /* ── Accents ── */
  --rubric: #98201f;
  --gilt: #a77c2c;
  --marian: #2c4a6e;

  /* ── Lines ── */
  --rule: rgba(37, 32, 26, 0.25);
  --rule-soft: rgba(37, 32, 26, 0.12);

  /* ── Semantic state ──
   * Named by meaning, not by colour, so that a status pill does not have to
   * know that "active" happens to be green-ish. These are the only colours a
   * component should reach for when expressing state. */
  --state-good: #3f6b47;
  --state-good-bg: rgba(63, 107, 71, 0.1);
  --state-warn: #8a6516;
  --state-warn-bg: rgba(167, 124, 44, 0.14);
  --state-bad: var(--rubric);
  --state-bad-bg: rgba(152, 32, 31, 0.1);

  /* ── Type ──
   * Cormorant Garamond for display, EB Garamond for text. Both are already
   * loaded by every page; the stacks below are the fallbacks that render while
   * the webfont is still in flight. */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-text: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* ── Spacing ──
   * A 4px-based scale. Every margin and padding in the shared component layer
   * comes from here, so vertical rhythm is a decision made once. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Motion ──
   * One duration and one easing, so everything on the site moves with the same
   * rhythm. 200ms sits inside the 150-300ms band where a transition reads as
   * responsive rather than sluggish. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;
  --dur-slow: 400ms;

  /* ── Layout ── */
  --measure: 46rem;
  --measure-wide: 1020px;
}

/* Motion tokens collapse rather than every component re-declaring the query.
 * A component that animates only via var(--dur) needs no media query at all. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
}