:root {
  /* Typography */
  --cb-font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --cb-font-body: "Manrope", "Segoe UI", sans-serif;
  --cb-font-mono: "JetBrains Mono", "Consolas", monospace;

  --cb-font-size-12: 12px;
  --cb-font-size-13: 13px;
  --cb-font-size-14: 14px;
  --cb-font-size-16: 16px;
  --cb-font-size-18: 18px;
  --cb-font-size-20: 20px;
  --cb-font-size-24: 24px;
  --cb-font-size-32: 32px;

  /* Colors */
  --cb-color-accent-500: #0f766e;
  --cb-color-accent-600: #0b5f59;
  --cb-color-accent-100: #ccfbf1;

  --cb-color-bg: #f4f7f9;
  --cb-color-surface-1: #ffffff;
  --cb-color-surface-2: #eef3f6;
  --cb-color-surface-3: #e2e9ee;
  --cb-color-text-1: #0f1720;
  --cb-color-text-2: #334155;
  --cb-color-text-3: #64748b;
  --cb-color-border: #cbd5e1;

  --cb-color-success-500: #15803d;
  --cb-color-success-100: #dcfce7;
  --cb-color-warning-500: #b45309;
  --cb-color-warning-100: #ffedd5;
  --cb-color-danger-500: #b91c1c;
  --cb-color-danger-100: #fee2e2;
  --cb-color-info-500: #0369a1;
  --cb-color-info-100: #e0f2fe;
  --cb-color-focus: #0891b2;

  /* Layout */
  --cb-shell-width: 336px;
  --cb-rail-width: 64px;
  --cb-topbar-height: 60px;
  --cb-shell-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --cb-radius-sm: 6px;
  --cb-radius-md: 10px;
  --cb-radius-lg: 14px;

  --cb-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --cb-shadow-md: 0 6px 18px rgba(2, 6, 23, 0.1);
  --cb-shadow-lg: 0 14px 40px rgba(2, 6, 23, 0.14);

  /* Compatibility map for existing md3 classes */
  --md-sys-color-primary: var(--cb-color-accent-500);
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: var(--cb-color-accent-100);
  --md-sys-color-on-primary-container: #134e4a;

  --md-sys-color-secondary: #0f766e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d6f4ef;
  --md-sys-color-on-secondary-container: #134e4a;

  --md-sys-color-tertiary: #0f1720;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e2e8f0;
  --md-sys-color-on-tertiary-container: #0f1720;

  --md-sys-color-error: var(--cb-color-danger-500);
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: var(--cb-color-danger-100);
  --md-sys-color-on-error-container: #7f1d1d;

  --md-sys-color-success: var(--cb-color-success-500);
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: var(--cb-color-success-100);
  --md-sys-color-on-success-container: #1b5e20;

  --md-sys-color-warning: var(--cb-color-warning-500);
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: var(--cb-color-warning-100);
  --md-sys-color-on-warning-container: #7c4a03;

  --md-sys-color-danger-hover: #dc2626;
  --md-sys-color-untrusted: var(--cb-color-danger-500);
  --md-sys-color-untrusted-container: var(--cb-color-danger-100);
  --md-sys-color-surface-elevated: var(--cb-color-surface-2);
  --md-sys-color-accent-muted: var(--cb-color-accent-500);
  --md-sys-color-text-muted: var(--cb-color-text-3);

  --md-sys-color-surface: var(--cb-color-surface-1);
  --md-sys-color-on-surface: var(--cb-color-text-1);
  --md-sys-color-surface-variant: var(--cb-color-surface-2);
  --md-sys-color-on-surface-variant: var(--cb-color-text-2);
  --md-sys-color-outline: #94a3b8;
  --md-sys-color-outline-variant: var(--cb-color-border);
  --md-sys-color-background: var(--cb-color-bg);
  --md-sys-color-on-background: var(--cb-color-text-1);

  --md-sys-shape-corner-extra-small: var(--cb-radius-sm);
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: var(--cb-radius-md);
  --md-sys-shape-corner-large: 12px;
  --md-sys-shape-corner-extra-large: var(--cb-radius-lg);
  --md-sys-shape-corner-full: 999px;

  --md-sys-typescale-display-large-font: var(--cb-font-display);
  --md-sys-typescale-headline-large-font: var(--cb-font-display);
  --md-sys-typescale-title-large-font: var(--cb-font-display);
  --md-sys-typescale-body-large-font: var(--cb-font-body);
  --md-sys-typescale-label-large-font: var(--cb-font-body);

  --md-sys-typescale-body-large-size: var(--cb-font-size-14);
  --md-sys-typescale-body-large-line-height: 20px;
  --md-sys-typescale-label-large-size: var(--cb-font-size-13);
  --md-sys-typescale-label-large-line-height: 18px;
  --md-sys-typescale-title-large-size: 20px;

  /* Theme-aware overlay/mix tokens */
  --cb-color-white-overlay: rgba(255, 255, 255, 0.86);
  --cb-color-white-overlay-soft: rgba(255, 255, 255, 0.64);
  --cb-color-dark-overlay: rgba(15, 23, 32, 0.36);
  --cb-color-dark-overlay-subtle: rgba(15, 23, 32, 0.05);
  --cb-color-gradient-teal: rgba(15, 118, 110, 0.18);
  --cb-color-gradient-blue: rgba(3, 105, 161, 0.12);
  --cb-color-nav-tint: #dbeafe;
}

/* =============================================
   Dark Mode Color Palette
   ============================================= */
:root[data-theme="dark"] {
  /* Surfaces & backgrounds */
  --cb-color-bg: #0f1720;
  --cb-color-surface-1: #1a2332;
  --cb-color-surface-2: #243044;
  --cb-color-surface-3: #2d3b50;
  --cb-color-border: #334155;

  /* Text */
  --cb-color-text-1: #e8edf2;
  --cb-color-text-2: #94a3b8;
  --cb-color-text-3: #64748b;

  /* Accent (lighter teal for dark backgrounds) */
  --cb-color-accent-500: #2dd4bf;
  --cb-color-accent-600: #14b8a6;
  --cb-color-accent-100: #0f3d38;

  /* Semantic colors (brighter for dark backgrounds) */
  --cb-color-success-500: #4ade80;
  --cb-color-success-100: #14532d;
  --cb-color-warning-500: #fbbf24;
  --cb-color-warning-100: #451a03;
  --cb-color-danger-500: #f87171;
  --cb-color-danger-100: #450a0a;
  --cb-color-info-500: #38bdf8;
  --cb-color-info-100: #0c2d48;
  --cb-color-focus: #22d3ee;

  /* Shadows (stronger for dark mode) */
  --cb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --cb-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
  --cb-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);

  /* Theme-aware overlays */
  --cb-color-white-overlay: rgba(26, 35, 50, 0.92);
  --cb-color-white-overlay-soft: rgba(26, 35, 50, 0.64);
  --cb-color-dark-overlay: rgba(0, 0, 0, 0.5);
  --cb-color-dark-overlay-subtle: rgba(0, 0, 0, 0.2);
  --cb-color-gradient-teal: rgba(45, 212, 191, 0.1);
  --cb-color-gradient-blue: rgba(56, 189, 248, 0.08);
  --cb-color-nav-tint: #1e3a5f;

  /* MD3 compatibility overrides */
  --md-sys-color-on-primary: #0f1720;
  --md-sys-color-primary-container: var(--cb-color-accent-100);
  --md-sys-color-on-primary-container: #99f6e4;
  --md-sys-color-secondary-container: #134e4a;
  --md-sys-color-on-secondary-container: #99f6e4;
  --md-sys-color-tertiary: #e8edf2;
  --md-sys-color-on-tertiary: #0f1720;
  --md-sys-color-tertiary-container: #334155;
  --md-sys-color-on-tertiary-container: #e8edf2;
  --md-sys-color-on-error: #0f1720;
  --md-sys-color-error-container: var(--cb-color-danger-100);
  --md-sys-color-on-error-container: #fca5a5;
  --md-sys-color-outline: #64748b;

  --md-sys-color-success: #4ade80;
  --md-sys-color-on-success: #052e16;
  --md-sys-color-success-container: #14532d;
  --md-sys-color-on-success-container: #86efac;
  --md-sys-color-warning: #fbbf24;
  --md-sys-color-on-warning: #451a03;
  --md-sys-color-warning-container: #451a03;
  --md-sys-color-on-warning-container: #fde68a;
  --md-sys-color-danger-hover: #ef4444;
  --md-sys-color-untrusted: #fca5a5;
  --md-sys-color-untrusted-container: #450a0a;
  --md-sys-color-surface-elevated: var(--cb-color-surface-2);
  --md-sys-color-accent-muted: #5eead4;
  --md-sys-color-text-muted: #94a3b8;
}

/* System dark mode preference (fallback when no explicit toggle) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cb-color-bg: #0f1720;
    --cb-color-surface-1: #1a2332;
    --cb-color-surface-2: #243044;
    --cb-color-surface-3: #2d3b50;
    --cb-color-border: #334155;
    --cb-color-text-1: #e8edf2;
    --cb-color-text-2: #94a3b8;
    --cb-color-text-3: #64748b;
    --cb-color-accent-500: #2dd4bf;
    --cb-color-accent-600: #14b8a6;
    --cb-color-accent-100: #0f3d38;
    --cb-color-success-500: #4ade80;
    --cb-color-success-100: #14532d;
    --cb-color-warning-500: #fbbf24;
    --cb-color-warning-100: #451a03;
    --cb-color-danger-500: #f87171;
    --cb-color-danger-100: #450a0a;
    --cb-color-info-500: #38bdf8;
    --cb-color-info-100: #0c2d48;
    --cb-color-focus: #22d3ee;
    --cb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cb-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
    --cb-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);
    --cb-color-white-overlay: rgba(26, 35, 50, 0.92);
    --cb-color-white-overlay-soft: rgba(26, 35, 50, 0.64);
    --cb-color-dark-overlay: rgba(0, 0, 0, 0.5);
    --cb-color-dark-overlay-subtle: rgba(0, 0, 0, 0.2);
    --cb-color-gradient-teal: rgba(45, 212, 191, 0.1);
    --cb-color-gradient-blue: rgba(56, 189, 248, 0.08);
    --cb-color-nav-tint: #1e3a5f;
    --md-sys-color-on-primary: #0f1720;
    --md-sys-color-primary-container: var(--cb-color-accent-100);
    --md-sys-color-on-primary-container: #99f6e4;
    --md-sys-color-secondary-container: #134e4a;
    --md-sys-color-on-secondary-container: #99f6e4;
    --md-sys-color-tertiary: #e8edf2;
    --md-sys-color-on-tertiary: #0f1720;
    --md-sys-color-tertiary-container: #334155;
    --md-sys-color-on-tertiary-container: #e8edf2;
    --md-sys-color-on-error: #0f1720;
    --md-sys-color-error-container: var(--cb-color-danger-100);
    --md-sys-color-on-error-container: #fca5a5;
    --md-sys-color-outline: #64748b;

    --md-sys-color-success: #4ade80;
    --md-sys-color-on-success: #052e16;
    --md-sys-color-success-container: #14532d;
    --md-sys-color-on-success-container: #86efac;
    --md-sys-color-warning: #fbbf24;
    --md-sys-color-on-warning: #451a03;
    --md-sys-color-warning-container: #451a03;
    --md-sys-color-on-warning-container: #fde68a;
    --md-sys-color-danger-hover: #ef4444;
    --md-sys-color-untrusted: #fca5a5;
    --md-sys-color-untrusted-container: #450a0a;
    --md-sys-color-surface-elevated: var(--cb-color-surface-2);
    --md-sys-color-accent-muted: #5eead4;
    --md-sys-color-text-muted: #94a3b8;
  }
}