/* Hallmark · tokens · Café Galerie
 * theme: Newsprint · genre: editorial
 * axes — paper band: light (97%) · display style: roman-serif · accent hue: warm (31°)
 * Anchor hue 31 is sampled from the café's own sign in logo.jpg (#C92916).
 */

:root {
  /* ---- Paper & ink — warm-tinted toward the anchor hue, never pure #fff/#000 ---- */
  --color-paper:       oklch(97%   0.008 72);
  --color-paper-2:     oklch(94.5% 0.010 68);
  --color-paper-3:     oklch(91%   0.012 62);
  --color-rule:        oklch(84%   0.014 55);
  --color-neutral:     oklch(58%   0.014 45);   /* non-text / large type only (3.9:1) */
  --color-muted:       oklch(43%   0.016 40);   /* body-safe secondary text (7.5:1) */
  --color-ink:         oklch(21%   0.016 38);   /* 16.3:1 on paper */

  /* ---- Accent — one hue, the sign red. Kept under ~3% of any viewport. ---- */
  --color-accent:      oklch(54%   0.190 31);   /* 5.1:1 on paper — link-text safe */
  --color-accent-deep: oklch(43%   0.170 31);   /* 8.1:1 — hover / pressed */
  --color-focus:       oklch(54%   0.190 31);

  /* ---- Overlay modifiers (transparency is a modifier, not a palette entry) ---- */
  --color-scrim:       oklch(18% 0.020 35 / 0.62);
  --color-scrim-0:     oklch(18% 0.020 35 / 0);
  --color-on-photo:    oklch(97% 0.010 80);

  /* ---- Type ---- */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  /* Major-third scale (1.25) from a 16px body */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  /* Display clamps are deliberately conservative: Finnish compounds
     ("lounasbuffeesta") need ~35% more horizontal room than English. */
  --text-display:   clamp(2rem, 4.4vw + 0.75rem, 4.25rem);
  --text-display-s: clamp(1.75rem, 3vw + 0.75rem, 2.75rem);

  /* ---- Space — 4pt scale, 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;
  --page-gutter: clamp(1.25rem, 5vw, 5rem);

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

  /* ---- Motion — state transitions only; this page has no page-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;

  /* ---- Depth ---- */
  --z-base:   1;
  --z-sticky: 200;
}