/* BookDinks shared product tokens.
   Main app and tournament surfaces must map their legacy variables here. */
:root {
  --brand-green: #1f3a2e;
  --brand-green-strong: #17352b;
  --brand-green-deep: #082027;
  --brand-lime: #b5e048;
  --brand-lime-strong: #93bd2f;
  --brand-coral: #e8734a;

  --product-bg: #f7f6f1;
  --product-surface: #ffffff;
  --product-surface-muted: #fbfaf6;
  --product-text: #1b211d;
  --product-text-muted: #5c6660;
  --product-border: #e7e5da;
  --product-ink: #15181a;
  --product-canvas: #f4f5f5;
  --product-line: #dfe3e4;
  --product-hairline: #e7eaeb;
  --product-brand-deep: #0b2c34;
  --product-brand-deep-alt: #123640;
  --product-accent: #d8e832;
  --product-accent-strong: #cbd75b;
  --product-accent-tint: #f6fad0;
  --product-accent-soft: #f8fadf;

  --product-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --score-font: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  /* Canonical breakpoint values. Keep media queries aligned to these values. */
  --bp-sm: 520px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

html[data-theme="dark"] {
  --product-bg: #082027;
  --product-surface: #12372f;
  --product-surface-muted: #173f35;
  --product-text: #f2f5f0;
  --product-text-muted: #b7c5bd;
  --product-border: rgba(242, 245, 240, 0.22);
  --product-ink: #f2f5f0;
  --product-canvas: #0e2b25;
  --product-line: rgba(242, 245, 240, 0.2);
  --product-hairline: rgba(242, 245, 240, 0.14);
}