/* ==========================================================================
   Overseer · Design tokens  [CONFIG]
   Colour values come from Client UI Script §3.3. Change them here only.
   9 Nov 2026 (Jim): accent = Overseer logo blue, light theme on a white background.
   The theme is resolved by JS (system / light / dark) into html[data-theme].
   ========================================================================== */

:root {
  --font-ui: "Adwaita Sans", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "Ubuntu", "Cantarell", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Adwaita Mono", "JetBrains Mono", ui-monospace, "SF Mono",
               "Ubuntu Mono", monospace;

  /* Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 only */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  --radius: 12px;
  --radius-sm: 8px;
  --column: 640px;
  --header-h: 52px;
  --motion: 180ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #1C1D21;
  --muted: #5F6470;
  --border: #E1E3E8;
  --accent: #2559B5;
  --on-accent: #FFFFFF;
  --success: #2E7D4F;
  --warning: #B26A00;
  --danger: #B3261E;

  --accent-soft: rgba(37, 89, 181, 0.08);
  --accent-softer: rgba(37, 89, 181, 0.04);
  --hover: rgba(28, 29, 33, 0.04);
  --field: #F7F8FA;
  --shadow: 0 1px 2px rgba(28, 29, 33, 0.04), 0 1px 1px rgba(28, 29, 33, 0.03);
  --shadow-lg: 0 12px 40px rgba(28, 29, 33, 0.16), 0 2px 6px rgba(28, 29, 33, 0.06);
  --header-bg: rgba(255, 255, 255, 0.86);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1E1F22;
  --surface: #2A2B2F;
  --text: #EDEDEF;
  --muted: #A3A7B0;
  --border: #3A3C42;
  --accent: #6FA8F0;
  --on-accent: #0B1630;
  --success: #6BCB8B;
  --warning: #F0B357;
  --danger: #F28B82;

  --accent-soft: rgba(111, 168, 240, 0.14);
  --accent-softer: rgba(111, 168, 240, 0.07);
  --hover: rgba(237, 237, 239, 0.05);
  --field: #242528;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --header-bg: rgba(42, 43, 47, 0.86);
}