/*
 * Good Shout — design tokens.
 * Single source of truth for brand colour, status colour, category tints,
 * type and radii. Loaded from index.html BEFORE /index.css.
 *
 * Tailwind (CDN play script) maps its colour/font names onto these vars in
 * /design/tailwind.config.js, so changing a value here changes it everywhere.
 */

:root {
  /* --- Brand --- */
  --color-cream: #FEFBF6;
  --color-cream-dark: #F2EBE0;
  --color-red: #D64045;
  --color-red-hover: #B93337;
  --color-dark: #374151;
  --color-dark-light: #6B7280;
  --color-steel: #5784BA;

  /* --- Status ---
   * `--status-x` is the pure colour (fills, borders, pins).
   * `--status-x-ink` is the darker variant used for text on cream/white. */
  --status-seal: #F5B301;
  --status-seal-ink: #8A6200;
  --status-recommend: #22A06B;
  --status-recommend-ink: #1B7F55;
  --status-alright: #2CA7A0;
  --status-alright-ink: #217F7A;
  --status-avoid: #D64045;
  --status-avoid-ink: #B93337;
  --status-want: #5784BA;
  --status-want-ink: #45699A;

  /* --- Category tints (replace the old purple/orange tiles) --- */
  --cat-food-bg: #FFF1DC;
  --cat-food-fg: #B8640B;
  --cat-drinks-bg: #E8EFF8;
  --cat-drinks-fg: #45699A;

  /* --- Type ---
   * Fraunces is the display face. To swap it, change this ONE line (and the
   * Google Fonts link in index.html). Never hardcode the family name anywhere
   * else — use var(--font-display) or the `font-display` Tailwind alias. */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
}

/* Fraunces variable axes. SOFT rounds the terminals (Recoleta-ish) and WONK
 * turns on the wonky single-storey glyphs. `opsz` is left to font-optical-sizing
 * so small headings get the lower optical size automatically — do not pin it.
 * Weight 900 is the default; use Tailwind's font-extrabold on headings under ~28px. */
.font-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}