/*
  tokens.css: the design tokens for the light look (warm off-white page, white
  bordered cards, orange fills, dark-orange text).

  Every colour pairing the site uses is measured by scripts/check-contrast.mjs,
  which reads THIS file. Change a colour here and re-run it; the results table
  lives in STYLEGUIDE.md. This is the ONLY css file that may hold a colour
  literal (scripts/check-content.mjs enforces it): everything else uses var().
*/
:root {
  /* Surfaces */
  --color-bg: #F7F5F2;            /* page background */
  --color-surface: #FFFFFF;       /* cards, tab bar, footer */
  --color-thumb: #D9D5CE;         /* thumbnail placeholder; decorative */

  /* Text */
  --color-text: #16181D;
  --color-muted: #545A66;

  /* Accent orange is for FILLS and the heading rule only. It fails as text
     (about 2.6:1 on the page). Text and icons ON an orange fill are always
     --color-on-accent, never white. */
  --color-accent: #FF6A13;
  --color-on-accent: #16181D;

  /* Dark orange: links, labels, the active tab, chevrons, Clear all. */
  --color-accent-text: #B93C0A;

  /* 30% of the accent over white (255,106,19 at 0.3 on 255,255,255): the fill of
     an active filter select. Ink text on it is measured by check-contrast. */
  --color-accent-tint: #FFD2B8;

  /* Control borders (need 3:1) */
  --color-border: #7A756D;

  /* Decorative outlines only: card outline and the 4px left edge */
  --color-card-border: #DDD8D0;
  --color-edge: #D8D3CA;

  /* Dark pill over photos, and the white text on it. The alpha is read by
     check-contrast.mjs, which composites it over white (worst case). */
  --color-pill: rgba(22, 24, 29, 0.82);
  --color-white: #FFFFFF;

  /* Focus ring: a literal equal to --color-accent-text (the contrast script
     cannot resolve var()). */
  --color-focus: #B93C0A;

  /* Type: no web fonts, so nothing is downloaded. */
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-body: 1.0625rem;         /* 17px */
  --text-small: 0.875rem;         /* 14px, the minimum */
  --text-title: 1.625rem;         /* 26px */
  --text-h2: 1.25rem;             /* 20px */
  --text-card: 1.125rem;          /* 18px */

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Shape */
  --radius: 12px;
  --radius-pill: 999px;

  /* Sizes */
  --tap-min: 44px;
  --tabbar-h: 58px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --content-max: 44rem;
}