/* Theme tokens and the two base rules, split out of style.css so the board and
   the wallboard can share a palette without sharing a layout.

   They lived together until /tv inherited the board's
   `main { max-width: 1900px; margin: 0 auto }` and rendered a 4K panel as a
   centred 1900px strip with a single column of cards. Anything loading this
   file gets the colours and nothing else. */

:root {
  color-scheme: light dark;

  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --line: #e2e5ea;
  --line-soft: #eef0f4;
  --ink: #12161c;
  --ink-2: #5a626e;
  --ink-3: #858d99;

  --ok: #1a7f4b;   --ok-bg: #e6f4ec;
  --warn: #9a6100; --warn-bg: #fdf0d9;
  --bad: #b4231f;  --bad-bg: #fbe6e5;
  --info: #1f5fa8; --info-bg: #e5eefa;
  --mute: #6b7280; --mute-bg: #eef0f3;

  --radius: 10px;
  /* a thin faded line, not a blur */
  --shadow: 0 1px 0 rgba(16, 22, 32, .07);
}

/* Dark tokens live in a mixin-ish block applied both by explicit choice and,
   when JS has not set data-theme, by system preference. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116;
  --panel: #161a21;
  --panel-2: #1b2028;
  --line: #262c36;
  --line-soft: #1f242c;
  --ink: #e8eaee;
  --ink-2: #a3abb8;
  --ink-3: #78818f;

  --ok: #4ec98a;   --ok-bg: #102a1d;
  --warn: #e0a940; --warn-bg: #2e2415;
  --bad: #f2706b;  --bad-bg: #2e1717;
  --info: #6aa9f0; --info-bg: #14243a;
  --mute: #9aa3b0; --mute-bg: #1e232b;
  --shadow: 0 1px 0 rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1116;
    --panel: #161a21;
    --panel-2: #1b2028;
    --line: #262c36;
    --line-soft: #1f242c;
    --ink: #e8eaee;
    --ink-2: #a3abb8;
    --ink-3: #78818f;

    --ok: #4ec98a;   --ok-bg: #102a1d;
    --warn: #e0a940; --warn-bg: #2e2415;
    --bad: #f2706b;  --bad-bg: #2e1717;
    --info: #6aa9f0; --info-bg: #14243a;
    --mute: #9aa3b0; --mute-bg: #1e232b;
    --shadow: 0 1px 0 rgba(0, 0, 0, .55);
  }
}

/* ---------------------------------------------------------------- cyberpunk
   Low-life bases (charcoal / deep navy / midnight purple) under high-tech
   neon accents. Semantics keep their meaning: magenta = broken, cyan =
   scheduled, toxic green = healthy. */
:root[data-theme="cyberpunk"] {
  color-scheme: dark;

  --bg: #0B0C10;              /* rich charcoal */
  --panel: #141A24;           /* charcoal lifted toward deep navy */
  --panel-2: #1F2833;         /* deep navy */
  --line: #2A3A55;
  --line-soft: #1B2431;
  --ink: #DCEBF7;             /* cool white, kept off the warm accent */
  --ink-2: #9FB6CE;
  --ink-3: #6B819B;

  --ok:   #00FF9F;  --ok-bg:   rgba(0, 255, 159, .11);   /* toxic green */
  --warn: #FCEADE;  --warn-bg: rgba(252, 234, 222, .12); /* acid yellow */
  --bad:  #FF2DAA;  --bad-bg:  rgba(255, 45, 170, .14);  /* hot magenta */
  --info: #00E5FF;  --info-bg: rgba(0, 229, 255, .11);   /* electric cyan */
  --mute: #8AA3C0;  --mute-bg: rgba(138, 163, 192, .12);

  --neon-purple: #1A0061;     /* midnight purple, used in gradients only */
  --shadow: 0 1px 0 rgba(0, 229, 255, .16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}