/*
 * tokens.css — Design tokens
 *
 * Single source of truth for colors, typography, and spacing.
 * Values here are fallbacks; each template overrides :root with
 * live values from data.json via an inline <style> block.
 *
 * To retheme the app, change data.json → theme.*
 * To change typography or spacing, change the vars below.
 */

:root {
  /* Colors — overridden per-page from data.json */
  --bg:       #F7F1E6;   /* warm paper */
  --text:     #2A241D;   /* near-black ink */
  --accent:   #4D6A93;   /* dusty cornflower */
  --card-bg:  #EDE4D2;   /* deeper warm paper */
  --muted:    rgba(42,36,29,0.55);
  --hairline: rgba(42,36,29,0.18);

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* Type scale */
  --text-display: 72px;   /* hero title */
  --text-display-accent: 56px; /* the & glyph */
  --text-stat:    92px;   /* big stat number */
  --text-body:    18px;   /* italic subtitle, presently clock */
  --text-ui:      17px;   /* unit labels, inputs */
  --text-footnote:15px;   /* stat footnote, error */
  --text-small:   13.5px; /* city note, hint */
  --text-eyebrow: 9.5px;  /* all caps labels */
  --text-btn:     10px;   /* button labels */

  /* Spacing */
  --max-w:  480px;
  --pad-h:  28px;    /* horizontal page padding */
  --pad-v:  56px;    /* top padding for app shell */
}