:root {
    /* Base Colors */
    --color-bg: #ffffff;
    --color-bg-alt: #f8f9fa;
    --color-surface: #ffffffc8;
    --color-fg: #1a202c;
    --color-fg-muted: #4a5568;
    --color-fg-subtle: #666666;
    --color-border: #e0e0e0;
    --color-border-strong: #90a2bc;

    /* Brand & Accent */
    /* Primary brand (darkened per request) */
    --color-primary: #2f6bb3;
    /* was #4a90e2 */
    --color-primary-rgb: 47, 107, 179;
    --color-primary-hover: #245488;
    /* adjusted hover for new base */
    --color-accent: #0078D4;
    /* Azure reference */

    /* Semantic Status */
    --color-success: #00c853;
    --color-warning: #ffd600;
    --color-major: #ff6d00;
    --color-critical: #d50000;
    --color-danger: #dc3545;
    --color-danger-rgb: 220, 53, 69;
    --color-info: #4299e1;

    /* Neutrals / Elevation */
    --color-neutral-0: #ffffff;
    --color-neutral-50: #f8f9fa;
    --color-neutral-100: #f1f1f1;
    --color-neutral-200: #eaeaea;
    --color-neutral-300: #e0e0e0;
    --color-neutral-400: #cbd5e0;
    --color-neutral-500: #a0aec0;
    --color-neutral-600: #777777;
    --color-neutral-700: #555555;
    --color-neutral-800: #333333;
    --color-neutral-900: #1a1a1a;

    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2rem;

    /* Spacing Scale (4px baseline) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Radius */
    --radius-xs: 2px;
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-pill: 20px;
    --radius-round: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 120ms;
    --transition-base: 200ms;
    --transition-slow: 320ms;

    /* Focus Ring */
    --color-focus: var(--color-primary);
    --focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.4);
}

:root.dark-mode, body.dark-mode {
    --color-bg: #0d0d0d;
    --color-bg-alt: #181818;
    --color-surface: #262626;
    --color-fg: #e0e0e0;
    --color-fg-muted: #aaa;
    --color-fg-subtle: #888;
    --color-border: #333;
    --color-border-strong: #555;

    /* Preserve brand, optionally tweak hover */
    --color-primary-hover: #357abd;

    /* Elevation adjustments */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.5);
}