:root {
    /*
     * Theme foundation for Progvision Audit.
     * - Core palette variables map to legacy color tokens used across the dashboard.
     * - Depth/blur/radius values keep the glassmorphism look consistent.
     * - Gradients + glow tokens power hero/panel backgrounds and update automatically per theme.
     *
     * To add a new theme, duplicate one of the [data-theme] blocks below,
     * adjust the --tone-* values, and the rest of the UI inherits the new styling instantly.
     */
    color-scheme: dark;

    /* Core palette */
    --tone-primary: #0d6efd;
    --tone-primary-strong: #0d6efd;
    --tone-secondary: #11cabe;
    --tone-tertiary: #f8c93b;
    --tone-alert: #ff6b6b;
    --tone-surface-900: #03070f;
    --tone-surface-850: #060b18;
    --tone-surface-800: #0b1324;
    --tone-surface-700: #111a2e;
    --tone-muted-500: #94a3c3;
    --tone-muted-400: #c5cee1;
    --tone-muted-300: #e4e8f4;

    /* Depth + blur */
    --depth-overlay-1: rgba(7, 8, 10, 0.9);
    --depth-overlay-2: rgba(11, 19, 36, 0.85);
    --depth-overlay-3: rgba(6, 10, 24, 0.94);
    --glass-border: rgba(148, 163, 184, 0.22);
    --glass-glow: 0 20px 60px rgba(13, 110, 253, 0.25);
    --blur-soft: 16px;
    --blur-strong: 26px;

    /* Radii + spacing */
    --radius-xs: 10px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 28px;
    --gutter: clamp(18px, 2.5vw, 32px);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    /* Motion */
    --transition-snappy: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: cubic-bezier(0.33, 1, 0.68, 1);

    /* Gradients */
    --gradient-primary: linear-gradient(120deg, var(--tone-primary), var(--tone-primary-strong));
    --gradient-dual: linear-gradient(125deg, rgba(78, 123, 255, 0.3), rgba(17, 202, 190, 0.28));
    --gradient-stage: radial-gradient(circle at 12% 18%, rgba(78, 123, 255, 0.32), transparent 45%),
        radial-gradient(circle at 85% 0%, rgba(248, 201, 59, 0.22), transparent 40%);
    --stage-glow-primary: rgba(78, 123, 255, 0.35);
    --stage-glow-secondary: rgba(17, 202, 190, 0.3);

    /* Legacy aliases */
    --blue: var(--tone-primary);
    --blue-dark: var(--tone-primary-strong);
    --aqua: var(--tone-secondary);
    --citrus: var(--tone-tertiary);
    --coral: var(--tone-alert);
    --ink-900: var(--tone-surface-900);
    --ink-800: var(--tone-surface-800);
    --ink-700: var(--tone-surface-700);
    --ink-600: var(--tone-surface-700);
    --gray-500: var(--tone-muted-500);
    --gray-400: var(--tone-muted-400);
    --white: #f8fbff;
    --surface: var(--depth-overlay-1);
    --border: var(--glass-border);
    --glow: var(--glass-glow);
    --transition: var(--transition-snappy);
}

:root[data-theme="arctic"] {
    --tone-primary: #4fd2ff;
    --tone-primary-strong: #1aa4ff;
    --tone-secondary: #44f5d6;
    --tone-tertiary: #9ef0ff;
    --tone-alert: #ff85a2;
    --tone-surface-900: #02060b;
    --tone-surface-850: #031320;
    --tone-surface-800: #072039;
    --tone-surface-700: #0b2c4a;
    --tone-muted-500: #9ec9e4;
    --tone-muted-400: #d3f1ff;
    --glass-glow: 0 25px 70px rgba(79, 210, 255, 0.3);
    --gradient-primary: linear-gradient(130deg, #4fd2ff, #1aa4ff);
    --gradient-dual: linear-gradient(120deg, rgba(31, 151, 255, 0.32), rgba(68, 245, 214, 0.24));
    --gradient-stage: radial-gradient(circle at 8% 12%, rgba(79, 210, 255, 0.35), transparent 45%),
        radial-gradient(circle at 80% 5%, rgba(68, 245, 214, 0.25), transparent 35%);
    --stage-glow-primary: rgba(79, 210, 255, 0.35);
    --stage-glow-secondary: rgba(68, 245, 214, 0.3);
}

:root[data-theme="solar"] {
    --tone-primary: #f26666;
    --tone-primary-strong: #f89a3b;
    --tone-secondary: #f7dc46;
    --tone-tertiary: #ffb347;
    --tone-alert: #ff4d6d;
    --tone-surface-900: #1a0904;
    --tone-surface-850: #1f1208;
    --tone-surface-800: #2b130a;
    --tone-surface-700: #38180c;
    --tone-muted-500: #f0c7a1;
    --tone-muted-400: #ffe5c7;
    --glass-glow: 0 28px 75px rgba(242, 102, 102, 0.35);
    --gradient-primary: linear-gradient(120deg, #f26666, #f7dc46);
    --gradient-dual: linear-gradient(125deg, rgba(242, 102, 102, 0.35), rgba(247, 220, 70, 0.28));
    --gradient-stage: radial-gradient(circle at 10% 15%, rgba(242, 102, 102, 0.38), transparent 50%),
        radial-gradient(circle at 85% 10%, rgba(247, 220, 70, 0.3), transparent 40%);
    --stage-glow-primary: rgba(242, 102, 102, 0.35);
    --stage-glow-secondary: rgba(247, 220, 70, 0.28);
}