/* Single source of theme colors. Add a new theme as another [data-theme="..."] block.
   No other stylesheet may hard-code a color.
   Semantic tokens: --surface (filled inputs, link pills), --secondary (secondary pill buttons),
   --ink / --on-ink (QR icon buttons), --shadow (soft card/menu shadow). */
:root,
[data-theme="mono"] {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #595959;
  --border: #d4d4d4;
  --accent: #000000;
  --on-accent: #ffffff;
  --danger: #b00020;
  --surface: #f5f5f5;
  --secondary: #ffffff;
  --on-secondary: #000000;
  --ink: #000000;
  --on-ink: #ffffff;
  --shadow: rgba(0, 0, 0, 0.09);
}

/* Figma "brand" look (VCF-14). Contrast on --bg: --fg 17:1, --muted 5.7:1, --accent 4.9:1 (white text on --accent 4.9:1).
   Figma's #888 / #c3c1c1 greys fail WCAG AA for text, so --muted is darkened to #666666. */
[data-theme="brand"] {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666666;
  --border: #d4d4d4;
  --accent: #2d68ff;
  --on-accent: #ffffff;
  --danger: #b00020;
  --surface: #f5f5f5;
  --secondary: #d9d9d9;
  --on-secondary: #000000;
  --ink: #000000;
  --on-ink: #ffffff;
  --shadow: rgba(0, 0, 0, 0.09);
}