/* Design tokens: generated from brandbook/tokens.json (Platypusreviews v1).
   Components must use these custom properties only — no raw hex values elsewhere. */

:root {
  color-scheme: light;

  /* Color: light theme (default) */
  --surface: #fff8ec;
  --surface-raised: #ffffff;
  --paper: #f3e6cc;
  --ink: #1a1a1a;
  --ink-muted: #5c564c;
  --outline: #1a1a1a;
  --hairline: #e4d7bf;
  --teal: #0f5c5c;
  --teal-100: #dcedea;
  --on-teal: #ffffff;
  --brown: #8b5a2b;
  --amber: #f5b700;
  --on-amber: #1a1a1a;
  --pro: #1e7a44;
  --pro-100: #e3f3e8;
  --con: #b83232;
  --con-100: #fbe4e2;
  --focus: #0f5c5c;

  /* Shadow */
  --shadow-sticker: 4px 4px 0 0 #1a1a1a;
  --shadow-sticker-sm: 2px 2px 0 0 #1a1a1a;

  /* Type families */
  --font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Type styles */
  --display-xl-size: 56px;  --display-xl-line: 60px;  --display-xl-weight: 800; --display-xl-track: -0.02em;
  --h1-size: 40px;          --h1-line: 46px;          --h1-weight: 800;         --h1-track: -0.01em;
  --h2-size: 28px;          --h2-line: 34px;          --h2-weight: 700;
  --h3-size: 21px;          --h3-line: 28px;          --h3-weight: 700;
  --body-lg-size: 19px;     --body-lg-line: 31px;     --body-lg-weight: 400;
  --body-size: 17px;        --body-line: 28px;        --body-weight: 400;
  --body-strong-weight: 700;
  --caption-size: 14px;     --caption-line: 20px;     --caption-weight: 500;
  --label-size: 12px;       --label-line: 16px;       --label-weight: 600;      --label-track: 0.08em;
  --score-size: 32px;       --score-line: 36px;       --score-weight: 600;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

/* Dark theme: explicit choice (toggle or ?theme=dark) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #141a1a;
  --surface-raised: #1c2424;
  --paper: #262e2d;
  --ink: #f4eee2;
  --ink-muted: #b5ada0;
  --outline: #e9e1d3;
  --hairline: #33403e;
  --teal: #4fb3a9;
  --teal-100: #24504c;
  --on-teal: #0e1a1a;
  --brown: #c8915a;
  --amber: #f5b700;
  --on-amber: #1a1a1a;
  --pro: #5cc98a;
  --pro-100: #18301f;
  --con: #f07c7c;
  --con-100: #3a1d1d;
  --focus: #f5b700;
  --shadow-sticker: 4px 4px 0 0 #000000;
  --shadow-sticker-sm: 2px 2px 0 0 #000000;
}