/*
 * ACM Command Hub's colours and type (DECISIONS.md, 2026-09-28, "D+ · Minimal, with a signature"): the hub and the
 * bot's pages import this first, then their own styles. Light by default; dark from the device unless the account
 * menu says Light, or always when it says Dark (theme.ts). The fonts' variables come from next/font in each app's layout.
 * Team Desk (its own repo) keeps an exact copy as static/tokens.css: tokens.test.ts says what to do when this changes.
 */

:root {
  color-scheme: light;
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #f7f6f3;
  --line: #eaeaea;
  --line-soft: #f0efeb;
  --ink: #111111;
  --text: #2f3437;
  --muted: #6b6a66;
  --faint: #9a9994;
  --link: #1f6c9f;
  --focus: #1f6c9f;
  --live-bg: #edf3ec;
  --live-fg: #346538;
  --warn-bg: #fbf3db;
  --warn-fg: #7a5200;
  --down-bg: #fdebec;
  --down-fg: #9f2f2d;
  --off-bg: #f1f0ed;
  --off-fg: #6b6a66;
  --btn-bg: #111111;
  --btn-fg: #ffffff;
  --btn-hover: #333333;
  --btn2-bg: #ffffff;
  --btn2-line: #e2e1dd;
  --btn2-hover: #fbfbfa;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-line: rgba(255, 255, 255, 0.8);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --field: rgba(255, 255, 255, 0.75);
  --field-line: rgba(0, 0, 0, 0.08);
  --input-bg: #ffffff;
  --input-line: #dcdbd6;
  --glow-a: rgba(226, 203, 160, 0.5);
  --glow-b: rgba(160, 198, 230, 0.5);
  --glow-c: rgba(178, 210, 178, 0.32);
  --node-bg: #ffffff;
  --wire: #cbc8bf;
  --hub-bg: #111111;
  --hub-fg: #ffffff;
  --ping: #1f6c9f;
  --avatar: #efeee9;
  --shadow: rgba(40, 36, 28, 0.22);
  --feature-edge: #2b2b2b;
  --feature-bg: radial-gradient(120% 100% at 100% 0%, #272625 0%, #111111 60%);
  --feature-cta: #ffffff;
  --sans: var(--font-geist), system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--font-newsreader), Georgia, "Times New Roman", serif;
  --mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark: from the device, unless the account menu says Light; or always, when it says Dark (lib/theme.ts). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e0e0d;
    --surface: #181817;
    --surface-2: #201f1e;
    --line: #2a2927;
    --line-soft: #232220;
    --ink: #f2f1ee;
    --text: #dcdad5;
    --muted: #a3a19b;
    --faint: #6f6d68;
    --link: #8cc0e6;
    --focus: #8cc0e6;
    --live-bg: rgba(110, 190, 130, 0.14);
    --live-fg: #9fd8ad;
    --warn-bg: rgba(227, 164, 79, 0.14);
    --warn-fg: #e8b86a;
    --down-bg: rgba(240, 139, 132, 0.14);
    --down-fg: #f3a19b;
    --off-bg: rgba(255, 255, 255, 0.06);
    --off-fg: #a3a19b;
    --btn-bg: #f2f1ee;
    --btn-fg: #111111;
    --btn-hover: #ffffff;
    --btn2-bg: #181817;
    --btn2-line: #33322f;
    --btn2-hover: #201f1e;
    --glass: rgba(28, 28, 26, 0.55);
    --glass-line: rgba(255, 255, 255, 0.09);
    --glass-hi: rgba(255, 255, 255, 0.07);
    --field: rgba(255, 255, 255, 0.05);
    --field-line: rgba(255, 255, 255, 0.08);
    --input-bg: #141413;
    --input-line: #33322f;
    --glow-a: rgba(190, 150, 90, 0.2);
    --glow-b: rgba(70, 120, 190, 0.28);
    --glow-c: rgba(80, 140, 100, 0.16);
    --node-bg: #181817;
    --wire: #3b3a37;
    --hub-bg: #f2f1ee;
    --hub-fg: #111111;
    --ping: #8cc0e6;
    --avatar: #262523;
    --shadow: rgba(0, 0, 0, 0.55);
    --feature-edge: #34332f;
    --feature-bg: radial-gradient(120% 100% at 100% 0%, #2c2b28 0%, #161615 60%);
    --feature-cta: #f2f1ee;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e0d;
  --surface: #181817;
  --surface-2: #201f1e;
  --line: #2a2927;
  --line-soft: #232220;
  --ink: #f2f1ee;
  --text: #dcdad5;
  --muted: #a3a19b;
  --faint: #6f6d68;
  --link: #8cc0e6;
  --focus: #8cc0e6;
  --live-bg: rgba(110, 190, 130, 0.14);
  --live-fg: #9fd8ad;
  --warn-bg: rgba(227, 164, 79, 0.14);
  --warn-fg: #e8b86a;
  --down-bg: rgba(240, 139, 132, 0.14);
  --down-fg: #f3a19b;
  --off-bg: rgba(255, 255, 255, 0.06);
  --off-fg: #a3a19b;
  --btn-bg: #f2f1ee;
  --btn-fg: #111111;
  --btn-hover: #ffffff;
  --btn2-bg: #181817;
  --btn2-line: #33322f;
  --btn2-hover: #201f1e;
  --glass: rgba(28, 28, 26, 0.55);
  --glass-line: rgba(255, 255, 255, 0.09);
  --glass-hi: rgba(255, 255, 255, 0.07);
  --field: rgba(255, 255, 255, 0.05);
  --field-line: rgba(255, 255, 255, 0.08);
  --input-bg: #141413;
  --input-line: #33322f;
  --glow-a: rgba(190, 150, 90, 0.2);
  --glow-b: rgba(70, 120, 190, 0.28);
  --glow-c: rgba(80, 140, 100, 0.16);
  --node-bg: #181817;
  --wire: #3b3a37;
  --hub-bg: #f2f1ee;
  --hub-fg: #111111;
  --ping: #8cc0e6;
  --avatar: #262523;
  --shadow: rgba(0, 0, 0, 0.55);
  --feature-edge: #34332f;
  --feature-bg: radial-gradient(120% 100% at 100% 0%, #2c2b28 0%, #161615 60%);
  --feature-cta: #f2f1ee;
}
:root[data-theme="light"] {
  color-scheme: light;
}