/* Midnight Board tokens – light by default, dark via prefers-color-scheme or data-theme.
   Reference: docs/design/midnight-board.html (the prototype). Keep token names stable:
   every stylesheet reads them. */
:root {
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --bg: #F4F5FB;
  --surface: #FFFFFF;
  --surface-alt: #ECEEF8;
  --track: #E1E3F1;
  --ink: #14162B;
  --muted: #6A6F8E;
  --accent: #5B5BF0;
  --accent-ink: #FFFFFF;
  --accent-soft: #E6E6FD;
  --accent2: #E0457B;
  --good: #1E9E6A;
  --bad: #D93C5C;
  --bad-soft: #FBE3E8;
  --warn: #A66A00;
  --warn-soft: #FBF0D8;
  --border: #E1E3F1;
  --shadow: rgba(26, 29, 64, 0.10);
  --shadow-card: 0 1px 2px rgba(26, 29, 64, 0.08), 0 8px 24px rgba(26, 29, 64, 0.06);
  --glow: 0 10px 28px rgba(91, 91, 240, 0.30);
  --hero: linear-gradient(135deg, #5B5BF0, #8B5CF6 60%, #E0457B);
  --overlay: rgba(11, 13, 28, 0.55);

  --gold: #FFC95C;
  --silver: #C4CAE0;
  --bronze: #CD7F4A;

  --cardface: #FFFFFF;
  --cardedge: #DDE0F0;
  --cardink: #14162B;
  --cardred: #D93C5C;

  --div-under: #3987e5;
  --div-mid: #8E94BA;
  --div-over: #e66767;

  /* Player colours (player.color is 1..12). Ink is the text colour on top of a chip. */
  --chip-ink: #FFFFFF;
  --chip-1: #5B5BF0; --chip-2: #E0457B; --chip-3: #1E9E6A; --chip-4: #D9961A;
  --chip-5: #1E9BD8; --chip-6: #E86F2C; --chip-7: #9B5BE8; --chip-8: #7FB320;
  --chip-9: #12A5A5; --chip-10: #E5484D; --chip-11: #B5A61B; --chip-12: #6B7599;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0D1C;
    --surface: #14172B;
    --surface-alt: #1C2038;
    --track: #262B4A;
    --ink: #ECEEFF;
    --muted: #8E94BA;
    --accent: #8B8DFF;
    --accent-ink: #0B0D1C;
    --accent-soft: #23275A;
    --accent2: #FF6B9D;
    --good: #4AE3A0;
    --bad: #FF6B8A;
    --bad-soft: #3A1B28;
    --warn: #FFC95C;
    --warn-soft: #3A2F14;
    --border: #262B4A;
    --shadow: rgba(0, 0, 0, 0.40);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.5);
    --glow: 0 10px 30px rgba(139, 141, 255, 0.25);
    --hero: linear-gradient(135deg, #3B3BC8, #6D3FD8 60%, #C2306A);
    --overlay: rgba(0, 0, 0, 0.65);
    --cardface: #F2F3FF;
    --cardedge: #9A9FC8;
    --cardred: #D93C5C;
    --div-under: #5AA0F0;
    --div-mid: #4A4F73;
    --div-over: #FF7B7B;
    --chip-ink: #0B0D1C;
    --chip-1: #8B8DFF; --chip-2: #FF6B9D; --chip-3: #4AE3A0; --chip-4: #FFC95C;
    --chip-5: #5CC8FF; --chip-6: #FF9A5C; --chip-7: #C58BFF; --chip-8: #B8E85C;
    --chip-9: #2BD4D4; --chip-10: #FF7A7A; --chip-11: #E6D84F; --chip-12: #9AA5C7;
  }
}

:root[data-theme="dark"] {
  --bg: #0B0D1C;
  --surface: #14172B;
  --surface-alt: #1C2038;
  --track: #262B4A;
  --ink: #ECEEFF;
  --muted: #8E94BA;
  --accent: #8B8DFF;
  --accent-ink: #0B0D1C;
  --accent-soft: #23275A;
  --accent2: #FF6B9D;
  --good: #4AE3A0;
  --bad: #FF6B8A;
  --bad-soft: #3A1B28;
  --warn: #FFC95C;
  --warn-soft: #3A2F14;
  --border: #262B4A;
  --shadow: rgba(0, 0, 0, 0.40);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.5);
  --glow: 0 10px 30px rgba(139, 141, 255, 0.25);
  --hero: linear-gradient(135deg, #3B3BC8, #6D3FD8 60%, #C2306A);
  --overlay: rgba(0, 0, 0, 0.65);
  --cardface: #F2F3FF;
  --cardedge: #9A9FC8;
  --cardred: #D93C5C;
  --div-under: #5AA0F0;
  --div-mid: #4A4F73;
  --div-over: #FF7B7B;
  --chip-ink: #0B0D1C;
  --chip-1: #8B8DFF; --chip-2: #FF6B9D; --chip-3: #4AE3A0; --chip-4: #FFC95C;
  --chip-5: #5CC8FF; --chip-6: #FF9A5C; --chip-7: #C58BFF; --chip-8: #B8E85C;
  --chip-9: #2BD4D4; --chip-10: #FF7A7A; --chip-11: #E6D84F; --chip-12: #9AA5C7;
}