/* Color tokens — see DESIGN.md §2. Tokens only; no raw hex in component CSS.
   (The out-of-scope palettes of DESIGN.md §5a — semantic danger/success/warning,
   vendored Leaflet, content gradients — deliberately keep their literals.) */
:root{
  /* Brand */
  --farrow-teal:#00A99D;        /* primary brand color; chrome fills only */
  --farrow-teal-deep:#00786F;   /* teal for TEXT/links/icons on light backgrounds (AA-safe) */
  --farrow-teal-tint:#D7F0EE;   /* pale teal; subtle highlights, selected rows */
  /* Bucket fills (ratified Ben + Alto 2026-09-03, batch rank-polish). §7 bans
     new accent colors without a ruling — this is that ruling, recorded in
     DESIGN.md §1/§2. Three soft fills for the three bucket circles on the
     rating sheet's first step, each carrying a --text-primary icon
     (≈ 7.2 / 10.1 / 7.0:1, AA). SCOPE: bucket-button fills inside
     #rank-modal ONLY — never scores, cards, Rankings rows, the feed, or a
     tier colour on content (DESIGN.md §9 item 4, §13 Display). */
  --bucket-liked:#7FC8A9;       /* "Liked" circle fill */
  --bucket-fine:#F2D98D;        /* "Fine" circle fill */
  --bucket-disliked:#EBA5A5;    /* "Didn't like" circle fill */
  /* Neutrals */
  --surface-page:#FAFAF8;       /* app/page background */
  --surface-card:#FFFFFF;       /* cards, sheets, nav bar background */
  --border-hairline:#E4E2DC;    /* card borders, dividers */
  --text-primary:#2C2C2A;       /* body text */
  --text-secondary:#888780;     /* metadata, captions, inactive tabs */
  --on-teal:#FFFFFF;            /* text/icons placed on --farrow-teal */
  /* Semantic danger (Ben-ruled 2026-08-12, confirm-modal batch). Was five
     copies of one red literal across component CSS; §5a's "danger keeps its
     literals" carve-out is now spent — the color lives here instead. */
  --danger:#dc2626;             /* destructive actions and error text; NOT status badges (see --badge-alert) */
  /* Semantic alert. §7 bans new accent colors without a Ben + Alto ruling —
     this is the ratified exception (Ben, 2026-07-25, notifications batch): an
     unread badge cannot carry brand teal on the teal header (§2 teal-on-teal)
     and no existing token reads as "unread". Standard alert red, scoped to
     status badges only — never a surface, never text, and explicitly NOT a
     new brand color. It exists as a token so component CSS stays hex-free. */
  --badge-alert:#E5484D;        /* unread/attention dot */
  /* Dark neutrals — landing hero ONLY (DESIGN.md §2). Not for app screens. */
  --surface-dark:#15171C;       /* hero background (replaces navy #0b1020) */
  --surface-dark-2:#1D2026;     /* hero secondary panels (replaces #0f1530) */
  --on-dark:#FFFFFF;            /* headline text/logo on dark */
  --on-dark-secondary:#C9CBCF;  /* supporting text on dark */
  /* Legacy vars, repointed at the tokens above (DESIGN.md §5b). --bg, --bg2,
     --brand2, --accent and --grad are deleted. */
  --ink:var(--text-primary); --paper:var(--surface-card);
  --muted:var(--text-secondary); --line:var(--border-hairline);
  --brand:var(--farrow-teal);
  --shadow:0 18px 50px -20px rgba(0,0,0,.35);
  --r:18px;
}