:root {
  /* Brand Colors */
  --color-primary: #1a2e4a;
  --color-primary-light: #243d63;
  --color-primary-dark: #0f1e30;
  --color-accent: #2d8cf0;
  --color-accent-hover: #1a7de0;

  /* Status Colors */
  --color-success: #28a745;
  --color-success-bg: #d4edda;
  --color-success-border: #c3e6cb;
  --color-warning: #ffc107;
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffeeba;
  --color-danger: #dc3545;
  --color-danger-bg: #f8d7da;
  --color-danger-border: #f5c6cb;
  --color-info: #17a2b8;
  --color-info-bg: #d1ecf1;
  --color-info-border: #bee5eb;

  /* Neutral Colors */
  --color-bg: #f0f2f5;
  --color-surface: #ffffff;
  --color-surface-2: #f8f9fa;
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;
  --color-text: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #adb5bd;

  /* Sidebar */
  --sidebar-width: 220px;
  --sidebar-bg: var(--color-primary);
  --sidebar-text: #c8d8ea;
  --sidebar-text-active: #ffffff;
  --sidebar-active-bg: rgba(255, 255, 255, 0.12);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.07);

  /* Header */
  --header-height: 56px;
  --header-bg: var(--color-primary-dark);
  --header-text: #e8edf2;

  /* Status bar */
  --statusbar-height: 32px;
  --statusbar-bg: #1a1a2e;
  --statusbar-text: #8899aa;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);

  /* Typography */
  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-md: 250ms ease;
}

/* Dark theme — toggled by class on <body> */
body.theme-dark {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-surface-2: #1c2128;
  --color-border: #30363d;
  --color-border-light: #21262d;
  --color-text: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-muted: #484f58;
  --color-primary: #0d1117;
  --color-primary-light: #161b22;
  --color-primary-dark: #010409;
  --sidebar-text: #8b949e;
  --sidebar-text-active: #e6edf3;
  --header-bg: #010409;
  --statusbar-bg: #010409;
}