/* Citymed — tokens 1:1 from OrthoNeuro AI */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap");

:root, [data-theme="light"] {
  --canvas: #eef1f4;
  --surface: #ffffff;
  --surface-raised: #f7f9fb;
  --surface-sunken: #e6eaee;
  --shell: #131b26;
  --shell-raised: #24303e;
  --shell-ink: #eef2f6;
  --shell-ink-muted: #93a1b0;
  --ink: #1f2a33;
  --ink-secondary: #54626e;
  --ink-muted: #6b7a86;
  --border: #e2e7ec;
  --brand: #1f8a4c;
  --brand-strong: #16703f;
  --brand-surface: #e6f2ea;
  --brand-on-shell: #3fb375;
  --ai: #135b91;
  --ai-surface: #e6f0fd;
  --notice-surface: #fdf3d9;
  --notice-ink: #7a5a12;
  --danger: #b3261e;
  --danger-surface: #fdecea;
  --focus-ring: #1f8a4c;
  --shadow-card: 0 1px 2px rgba(19,27,38,0.06);
  --shadow-raised: 0 2px 6px rgba(19,27,38,0.08);
  --shadow-popover: 0 8px 24px rgba(19,27,38,0.12);

  --font-sans: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --sidebar-w: 230px;
  --control-h: 40px;
  --hairline: 1px;
}

/* Dark — for the corridor TV board. Values beyond brand are proposals (see README). */
[data-theme="dark"] {
  --canvas: #0d131b;
  --surface: #1a2430;
  --surface-raised: #1f2a37;
  --surface-sunken: #131b26;
  --shell: #131b26;
  --shell-raised: #24303e;
  --ink: #eef2f6;
  --ink-secondary: #c3ccd5;
  --ink-muted: #93a1b0;
  --border: #24303e;
  --brand: #3fb375;
  --brand-strong: #3fb375;
  --brand-surface: #173a29;
  --notice-surface: #3a2f12;
  --notice-ink: #f0c95a;
  --danger-surface: #3d1a18;
  --shadow-card: none;
  --shadow-raised: none;
}

html, body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); }
a { color: var(--brand); } a:hover { color: var(--brand-strong); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }