/* CopyCat theme: the ONE place for colours, fonts, radii and shadows.
 *
 * Every page (/app, the dock, the overlay, and the login pages) loads this file and uses only these
 * variables, so changing a value here recolours everything at once. tests/test_theme.py fails if a
 * page uses a colour that isn't one of these variables.
 *
 * Values come from the CopyCat design system, https://claude.ai/artifact/FEFTN3vM5sLcXvt92R9cf1: dark (the app,
 * the default) and light (the public website, below).
 * Only the tab icons (favicons) can't read variables; they're drawn in --tabby and --logo-face by hand.
 */
:root {
  /* Grounds and surfaces */
  --surface-000: #121116;        /* page background */
  --surface-100: #1c1a21;        /* panels and cards */
  --surface-200: #26242c;        /* controls inside panels */
  --line: #36333d;               /* hairline borders and dividers */
  --line-strong: #77717f;        /* control borders */

  /* Text */
  --ink: #f3efe8;                /* everything readable */
  --ink-muted: #aaa4af;          /* timestamps, counts, helper text */

  /* Brand */
  --tabby: #ff8a3d;              /* primary buttons, links, active choice, the cat */
  --tabby-deep: #c2560f;         /* the cat's stripes and inner ears (logo only) */
  --on-tabby: #1d1a17;           /* text on a tabby fill */
  --logo-fur: var(--tabby);      /* the cat's coat (follows the brand colour) */
  --logo-face: #1d1a17;          /* the cat's eyes and nose */

  /* Donation roles (same on the dock and the overlay) */
  --butter: #ffd166;             /* donor names */
  --mint: #3ddc97;               /* amounts; success (connected, played) */

  /* States: always shown with a word too */
  --sky: #86beff;                /* in progress */
  --amber: #f5b84b;              /* warning */
  --coral: #ff7a72;              /* error, blocked */
  --status-played: #1d3a2e;      /* badge fills, with --ink text */
  --status-active: #23324f;
  --status-warn: #45361c;
  --status-blocked: #4a2526;

  /* The AI-voice label: the one deliberately high-contrast chip */
  --paper: #f3efe8;
  --on-paper: #1d1a17;

  /* The on-stream overlay card: always dark, it sits over game footage */
  --overlay-scrim: rgba(26, 24, 30, 0.88);
  --overlay-edge: rgba(255, 255, 255, 0.14);
  --overlay-ink: #f3efe8;
  --overlay-donor: #ffd166;
  --overlay-amount: #3ddc97;
  --overlay-muted: #aaa4af;
  --overlay-label-ink: #1d1a17;

  /* Keyboard focus ring */
  --focus: #ffb27a;

  /* Shadows (only on things that float) */
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0 10px 40px rgba(0, 0, 0, 0.35);

  /* Type (Google Fonts, with system fallbacks for offline PCs) */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Spacing and radii */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px;

  color-scheme: dark;
}

/* Light theme: for the public website (and anything printed); the app stays dark. A page opts in with
   <html data-theme="light">. The overlay-* colours don't change: the overlay card is always dark. */
[data-theme="light"] {
  --surface-000: #fbf8f3;
  --surface-100: #ffffff;
  --surface-200: #f2ede5;
  --line: #e2dace;
  --line-strong: #8a8276;
  --ink: #1d1a17;
  --ink-muted: #5c554d;
  --tabby: #a8490a;              /* darker, so it reads as text on light grounds */
  --on-tabby: #ffffff;
  --logo-fur: #ff8a3d;           /* the cat stays its bright orange on light grounds */
  --butter: #7d5800;
  --mint: #0f7449;
  --sky: #1d5ca8;
  --amber: #8a5a00;
  --coral: #bf2f2f;
  --status-played: #dcf1e6;
  --status-active: #e0eaf8;
  --status-warn: #f6e8cf;
  --status-blocked: #f8dcdc;
  --paper: #1d1a17;
  --on-paper: #f3efe8;
  --focus: #1d5ca8;
  --shadow-pop: 0 8px 24px rgba(29, 26, 23, 0.14);
  color-scheme: light;
}

/* The cat logo: inline SVGs use these classes, so it recolours with the theme too. */
.cat-fur { fill: var(--logo-fur); } .cat-fur-line { stroke: var(--logo-fur); }
.cat-stripe { fill: var(--tabby-deep); } .cat-stripe-line { stroke: var(--tabby-deep); }
.cat-face { fill: var(--logo-face); } .cat-face-line { stroke: var(--logo-face); }