:root {
  --color-bg: #f3f3f6;
  --color-surface: #ffffff;
  --color-surface-sunken: #f3f3f6;
  --color-border: #e1e4e8;
  --color-text: #1a1a1a;
  --color-text-muted: #5a5f6d;
  --color-primary: #0c4da2;
  --color-primary-dark: #0a3d8f;

  /* OA brand chrome: the navy header bar and the bright-blue "active" pill,
     borrowed from the shared design system across the client dashboard demo
     and the internal proposals tool -- see [[oa-brand-look-and-feel]]. */
  --color-header-gradient-start: #0a3d8f;
  --color-header-gradient-end: #0c4da2;
  --color-nav-active-start: #3b7dd8;
  --color-nav-active-mid: #5a9be6;
  --shadow-nav-active: 0 2px 8px rgba(59, 125, 216, 0.3);

  --color-on-track: #2da44e;
  --color-warning-bg: #fff8c5;
  --color-warning-text: #8a6d00;
  --color-at-risk-bg: #ffe3c9;
  --color-at-risk-text: #a34d00;
  --color-critical-bg: #ffd7d5;
  --color-critical-text: #b3221e;
  --color-data-quality-bg: #e6e8fa;
  --color-data-quality-text: #3d3d8f;
  --color-warm-bg: #ffe3c9;
  --color-warm-text: #a34d00;
  --color-cold-bg: #d8e6f7;
  --color-cold-text: #1f4e8c;

  --radius: 10px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --sidebar-width: 260px;
  --topbar-height: 60px;
  --z-backdrop: 40;
  --z-drawer: 50;
}

/*
 * Dark values are defined once as a mixin-like block via CSS custom
 * properties duplicated across two selectors: the OS-preference media query
 * (first paint / no-JS fallback) and the explicit [data-theme="dark"]
 * attribute (set by the sidebar toggle, persisted in localStorage). The
 * `:not([data-theme])` guard on the media-query version lets an explicit
 * choice always win over the OS preference. The reference sites are
 * light-only, so the dark palette keeps their blue brand hue but at
 * dark-mode-appropriate luminance rather than trying to invert their exact values.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0d1117;
    --color-surface: #161b22;
    --color-surface-sunken: #0a0e14;
    --color-border: #30363d;
    --color-text: #e6edf3;
    --color-text-muted: #9198a1;
    --color-primary: #58a6ff;
    --color-primary-dark: #79c0ff;

    --color-header-gradient-start: #0d2b57;
    --color-header-gradient-end: #163f7a;
    --color-nav-active-start: #2f6fd1;
    --color-nav-active-mid: #4a8be0;
    --shadow-nav-active: 0 2px 8px rgba(88, 166, 255, 0.35);

    --color-on-track: #3fb950;
    --color-warning-bg: #3b2f00;
    --color-warning-text: #e3b341;
    --color-at-risk-bg: #4a2a0a;
    --color-at-risk-text: #ffa657;
    --color-critical-bg: #4c1210;
    --color-critical-text: #ff7b72;
    --color-data-quality-bg: #1f2540;
    --color-data-quality-text: #a5a8f0;
    --color-warm-bg: #4a2a0a;
    --color-warm-text: #ffa657;
    --color-cold-bg: #12233c;
    --color-cold-text: #79c0ff;
  }
}

:root[data-theme='dark'] {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-surface-sunken: #0a0e14;
  --color-border: #30363d;
  --color-text: #e6edf3;
  --color-text-muted: #9198a1;
  --color-primary: #58a6ff;
  --color-primary-dark: #79c0ff;

  --color-header-gradient-start: #0d2b57;
  --color-header-gradient-end: #163f7a;
  --color-nav-active-start: #2f6fd1;
  --color-nav-active-mid: #4a8be0;
  --shadow-nav-active: 0 2px 8px rgba(88, 166, 255, 0.35);

  --color-on-track: #3fb950;
  --color-warning-bg: #3b2f00;
  --color-warning-text: #e3b341;
  --color-at-risk-bg: #4a2a0a;
  --color-at-risk-text: #ffa657;
  --color-critical-bg: #4c1210;
  --color-critical-text: #ff7b72;
  --color-data-quality-bg: #1f2540;
  --color-data-quality-text: #a5a8f0;
  --color-warm-bg: #4a2a0a;
  --color-warm-text: #ffa657;
  --color-cold-bg: #12233c;
  --color-cold-text: #79c0ff;
}

:root[data-theme='light'] {
  --color-bg: #f3f3f6;
  --color-surface: #ffffff;
  --color-surface-sunken: #f3f3f6;
  --color-border: #e1e4e8;
  --color-text: #1a1a1a;
  --color-text-muted: #5a5f6d;
  --color-primary: #0c4da2;
  --color-primary-dark: #0a3d8f;

  --color-header-gradient-start: #0a3d8f;
  --color-header-gradient-end: #0c4da2;
  --color-nav-active-start: #3b7dd8;
  --color-nav-active-mid: #5a9be6;
  --shadow-nav-active: 0 2px 8px rgba(59, 125, 216, 0.3);

  --color-on-track: #2da44e;
  --color-warning-bg: #fff8c5;
  --color-warning-text: #8a6d00;
  --color-at-risk-bg: #ffe3c9;
  --color-at-risk-text: #a34d00;
  --color-critical-bg: #ffd7d5;
  --color-critical-text: #b3221e;
  --color-data-quality-bg: #e6e8fa;
  --color-data-quality-text: #3d3d8f;
  --color-warm-bg: #ffe3c9;
  --color-warm-text: #a34d00;
  --color-cold-bg: #d8e6f7;
  --color-cold-text: #1f4e8c;
}