/* Hallmark · genre: editorial · macrostructure: Letter · theme: studied-DNA
 * source: src/content/photos/tower-1900.jpg (the society's own 1900 postcard)
 * tone: archival / epistolary · anchor hue: 25 (the tower's brick, via the card red)
 * nav: N9 edge-aligned + quiet link row · footer: Ft6 letter close
 * hero: H5 Letter (salutation · prose · signed) · enrichment: the postcard itself
 * axes: paper-band=light · display-style=classical-serif · accent-hue=warm
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 *
 * ── THE PALETTE IS SAMPLED, NOT CHOSEN ────────────────────────────────────
 * Every value below was measured off the 1900 postcard rather than picked by
 * eye. The collotype is a faint rose-grey: its sky is oklch(94% 0.0115 357),
 * which is #f2e8eb and is literally --color-paper; the tower shaft is
 * oklch(61% 0.019 334); the foliage is oklch(25% 0.018 353) and is the ink.
 * Keeping every neutral inside that hue family is what lets the photograph be
 * laid onto the page with `mix-blend-mode: multiply` and read as printed into
 * the paper rather than pasted on top of it.
 *
 * LIGHT ONLY, ON PURPOSE. There is no dark palette and no `prefers-color-scheme`
 * block. A hundred-and-twenty-year-old postcard cannot be inverted honestly —
 * a negative of it reads as a photographic error, not as a night mode. If a
 * dark mode is ever wanted, it needs a different hero image, not a filter.
 *
 * ── PORTABILITY NOTE ──────────────────────────────────────────────────────
 * This file is the single source of truth for the design system. It has no
 * Astro, no framework and no build-step dependency. To port the design to a
 * WordPress theme, copy this file verbatim into the theme root and enqueue it
 * before style.css. Every rule elsewhere in the project references these
 * tokens by name — nothing inlines a colour or a font. See docs/wordpress-port.md.
 */

:root {
  color-scheme: light;

  /* ── Type families ─────────────────────────────────────────────────────
   * Two families. The letter is set in one serif — display and body are the
   * same face, because a letter is typed on one machine — and Archivo carries
   * the RECORD-MARK role: navigation, labels, dates, credits, colophon meta.
   * That is the outlier register, and it stays in those slots.
   * Both faces carry Latin Extended, which is non-negotiable here: the site
   * sets Hungarian (ő ű á é í ó ö ú) and Serbian Latin (š đ ć č ž) as peers. */
  --font-display: "Old Standard TT", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Old Standard TT", ui-serif, Georgia, "Times New Roman", serif;
  --font-mark:    "Archivo Variable", ui-sans-serif, "Segoe UI", Tahoma, sans-serif;

  /* ── Type scale · major third (1.25) from a 17px body ──────────────────
   * 17px, not 16: Old Standard TT has a small x-height and runs cool at 16. */
  --text-xs:        0.68rem;
  --text-sm:        0.85rem;
  --text-base:      1.0625rem;
  --text-md:        1.33rem;
  --text-lg:        1.66rem;
  --text-xl:        2.076rem;
  --text-2xl:       2.594rem;
  --text-3xl:       3.243rem;
  --text-4xl:       4.054rem;
  --text-display-s: clamp(2rem, 2.6vw + 1rem, 3rem);
  --text-display:   clamp(2.4rem, 5vw + 0.5rem, 4.5rem);

  /* ── Spacing · 4pt base, named by role ───────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ── Measure and gutters ─────────────────────────────────────────────── */
  --measure:       58ch;   /* a letter is narrower than an article */
  --measure-tight: 46ch;
  --page-max:      78rem;
  --page-pad:      clamp(1rem, 4vw, 4rem);

  /* ── Rules ───────────────────────────────────────────────────────────── */
  --rule-hair:  1px;
  --rule-thick: 3px;

  --radius-none: 0;
  --radius-sm:   2px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  480ms;

  /* ── Z-index · six named levels, never freestyle ─────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Colour · measured off the postcard (see the note at the top) ─────
   * Nothing here is pure #000 or #fff, and no neutral has zero chroma. */
  --color-paper:      oklch(94% 0.0115 357);   /* #f2e8eb — the card's sky */
  --color-paper-2:    oklch(90.5% 0.013 352);
  --color-paper-3:    oklch(86% 0.015 348);
  --color-rule:       oklch(80% 0.016 345);
  --color-rule-firm:  oklch(61% 0.019 334);    /* the tower shaft */
  --color-neutral:    oklch(61% 0.019 334);    /* non-text only: rules, marks */
  --color-muted:      oklch(43% 0.022 342);    /* secondary text — 6.9:1 on paper */
  --color-ink:        oklch(24% 0.018 353);    /* the foliage — 13.8:1 on paper */
  --color-accent:     oklch(48% 0.165 25);     /* brick — decorative marks, borders */
  --color-accent-ink: oklch(41% 0.150 25);     /* the same brick, safe for text — 8:1 */
  --color-focus:      oklch(46% 0.190 25);
  --color-selection:  oklch(86% 0.060 25);

  --shadow-hairline: 0 0 0 1px oklch(30% 0.01 353 / 0.07);

  /* ── The plate · how a photograph sits on the paper ───────────────────
   * Used by the letter's postcard and by any full-strength archival image.
   * `multiply` is what makes the card print into the page: the paper shows
   * through its highlights, so the two share one surface. */
  --plate-opacity: 0.6;
  --plate-blend:   multiply;
}