/**
 * RUNSPEC shared design tokens — import on app pages before page-specific <style>.
 * Body UI font: Lato; monospace (--fmono) for code, grids, technical controls.
 */
:root {
  --font-ui: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Syne', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --fmono: var(--font-mono);
  --fhead: var(--font-display);

  --text-base: 14px;
  --text-sm: 12px;
  --text-xs: 11px;
  --topbar-h: 54px;

  --bg: #0a0f16;
  --bg-panel: #0e1724;
  --bg-card: #12202f;
  --bg-input: #0e1724;
  --panel: var(--bg-panel);
  --card: var(--bg-card);

  --border: rgba(42, 157, 143, 0.15);
  --b-accent: rgba(42, 157, 143, 0.35);
  --accent: #2a9d8f;
  --accent2: #e5993a;
  --accent3: #5a9cf5;
  --amber: var(--accent2);
  --blue: var(--accent3);
  --red: #e05555;
  --accent-hover: #35b8a8;

  --hi: #dce9f5;
  --mid: #8fa8c0;
  --lo: #6a8a9f;
  --app-color: #6a8a9f;
  --app-color-light: #5a7a95;

  --input-bg: #12202f;
  --sidebar-bg: #0b1420;

  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --row-hover: rgba(42, 157, 143, 0.06);
  --nav-hover: rgba(42, 157, 143, 0.08);
  --table-head: #0b1420;
  --row-line: rgba(42, 157, 143, 0.1);
  --sel-row: rgba(42, 157, 143, 0.1);

  --topbar-bg: rgba(10, 15, 22, 0.97);
  --overlay: rgba(5, 10, 18, 0.7);
  --map-bg: #050c16;
  --subtle-bg: rgba(42, 157, 143, 0.04);
  --subtle-hover: rgba(42, 157, 143, 0.06);
  --subtle-bg2: rgba(42, 157, 143, 0.07);
  --shadow-modal: rgba(0, 0, 0, 0.5);
  --shadow-tip: rgba(0, 0, 0, 0.4);
  --radius: 8px;
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Semantic aliases (admin, inline styles) */
  --text: var(--hi);
  --text-dim: var(--mid);
  --fg: var(--hi);
  --danger: var(--red);
  --danger-hover: #f06666;
  --warn: #e9a23b;
  --navy: var(--bg-panel);
  --info: var(--accent3);
}

[data-theme="light"] {
  --bg: #f7fafa;
  --bg-panel: #ffffff;
  --bg-card: #f0f5f4;
  --bg-input: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;

  --border: #e0ece9;
  --b-accent: rgba(42, 157, 143, 0.35);
  --accent: #2a9d8f;
  --accent2: #c07a15;
  --accent3: #3574cc;
  --amber: #c97a1a;
  --blue: #3a7fd4;
  --red: #e05555;
  --accent-hover: #238a7a;

  --hi: #1a2736;
  --mid: #5a6f82;
  --lo: #7a8fa0;
  --app-color: #5a6f82;
  --app-color-light: #4a5f72;

  --input-bg: #ffffff;
  --sidebar-bg: #f0f5f4;

  --shadow: 0 2px 8px rgba(42, 157, 143, 0.1);
  --row-hover: rgba(42, 157, 143, 0.04);
  --nav-hover: rgba(42, 157, 143, 0.06);
  --table-head: #f0f5f4;
  --row-line: #e0ece9;
  --sel-row: rgba(42, 157, 143, 0.07);

  --topbar-bg: #ffffff;
  --overlay: rgba(0, 0, 0, 0.25);
  --map-bg: #eef6f3;
  --subtle-bg: rgba(42, 157, 143, 0.03);
  --subtle-hover: rgba(42, 157, 143, 0.05);
  --subtle-bg2: rgba(42, 157, 143, 0.04);
  --shadow-modal: rgba(42, 157, 143, 0.1);
  --shadow-tip: rgba(42, 157, 143, 0.08);
  --shadow-sm: 0 1px 4px rgba(42, 157, 143, 0.08);
  --shadow-md: 0 4px 12px rgba(42, 157, 143, 0.12);

  --text: var(--hi);
  --text-dim: var(--mid);
  --fg: var(--hi);
  --navy: #f2f4f6;
}