:root {
    /* --- Antigravity Design System --- */
    /* DEFAULT: Light Mode (:root) */

    /* Core Colors */
    --canvas: #f3f4f6;
    --panel: #ffffff;
    --surface: rgba(255, 255, 255, 0.65);
    --surface-solid: #ffffff;
    --surface-hover: rgba(var(--accent-rgb), 0.08);
    --surface-active: rgba(var(--accent-rgb), 0.16);
    --surface-dim: rgba(255, 255, 255, 0.4);
    --glass-blur: blur(20px);

    /* Accents */
    --accent: #2563eb;
    /* More vibrant blue */
    --accent-alt: #4f46e5;
    --accent-rgb: 37, 99, 235;

    /* Borders & Text */
    --border: rgba(0, 0, 0, 0.08);
    --border-bright: rgba(0, 0, 0, 0.12);
    --text-main: #0f172a;
    --text-dim: #475569;

    /* Semantic Components */

    /* Paper */
    --paper-bg: rgba(255, 255, 255, 0.7);
    --paper-border: rgba(255, 255, 255, 0.4);
    --paper-border-top: rgba(255, 255, 255, 0.8);
    --paper-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;

    /* Inputs */
    --input-bg: rgba(255, 255, 255, 0.6);
    --input-border: rgba(0, 0, 0, 0.1);
    --input-text: #0f172a;
    --input-placeholder: #94a3b8;
    --input-focus-border: var(--accent);
    --input-focus-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);

    /* Text Specificity */
    --label-text: var(--text-dim);
    --subtitle-text: var(--text-dim);

    /* Interactive Elements */
    --card-bg-inactive: rgba(255, 255, 255, 0.4);
    --card-border-inactive: rgba(0, 0, 0, 0.06);
    --icon-inactive: rgba(0, 0, 0, 0.3);

    /* Wizard Components */
    --stepper-track: rgba(0, 0, 0, 0.05);
    --stepper-dot-bg: #ffffff;
    --stepper-dot-border: rgba(0, 0, 0, 0.1);
    --avatar-wrapper-bg: rgba(255, 255, 255, 0.5);
    --summary-bg: rgba(255, 255, 255, 0.3);
    --summary-border: rgba(0, 0, 0, 0.06);
    --summary-label: var(--text-dim);
    --summary-value: var(--text-main);

    /* Atmosphere */
    --bg-gradient: radial-gradient(circle at 50% 0%, #e0e7ff 0%, #f3f4f6 100%);
    --glow-color: var(--accent);
    --glow-opacity: 0.1;

    /* Semantic Colors */
    --danger-color: #dc2626;
    --danger-rgb: 220, 38, 38;
    --success-color: #16a34a;
    --success-rgb: 22, 163, 74;
    --warning-color: #ea580c;
    --warning-rgb: 234, 88, 12;
    --info-color: #0284c7;
    --info-rgb: 2, 132, 199;

    /* Overlays & Shadows */
    --overlay-bg: rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);

    /* Geometry */
    --radius: 8px;
    --spacing-sm: 12px;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* --- Dark Mode Overrides (.dark-mode) --- */
.dark-mode {
    /* Core Colors */
    --canvas: #121212;
    --panel: #1a1a1a;
    --surface: rgba(36, 36, 36, 0.5);
    --surface-solid: #242424;
    --surface-hover: rgba(var(--accent-rgb), 0.1);
    --surface-active: rgba(var(--accent-rgb), 0.2);
    --glass-blur: blur(12px);

    /* Accents */
    --accent-rgb: 37, 99, 235;
    /* Default fallback, overridden by JS */

    /* Borders & Text */
    --border: #333333;
    --border-bright: #444444;
    --text-main: #ffffff;
    --text-dim: #a0a0a0;

    /* Semantic Components */

    /* Paper */
    --paper-bg: rgba(36, 36, 36, 0.5);
    --paper-border: rgba(255, 255, 255, 0.06);
    --paper-border-top: rgba(255, 255, 255, 0.1);
    --paper-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);

    /* Inputs */
    --input-bg: rgba(0, 0, 0, 0.2);
    --input-border: var(--border);
    --input-text: var(--text-main);
    --input-placeholder: rgba(255, 255, 255, 0.2);
    --input-focus-border: var(--accent);
    --input-focus-shadow: 0 10px 20px -10px rgba(var(--accent-rgb), 0.2);

    /* Interactive Elements */
    --card-bg-inactive: rgba(255, 255, 255, 0.03);
    --card-border-inactive: rgba(255, 255, 255, 0.1);
    --icon-inactive: rgba(255, 255, 255, 0.3);

    /* Wizard Components */
    --stepper-track: rgba(255, 255, 255, 0.2);
    /* Increased from 0.05 */
    --stepper-dot-bg: #1a1a1a;
    --stepper-dot-border: rgba(255, 255, 255, 0.2);
    --avatar-wrapper-bg: rgba(255, 255, 255, 0.1);
    --summary-bg: rgba(255, 255, 255, 0.05);
    --summary-border: rgba(255, 255, 255, 0.1);
    --summary-label: var(--text-dim);
    --summary-value: #ffffff;

    /* Atmosphere */
    --bg-gradient: radial-gradient(circle at 50% 10%, #1a202c 0%, var(--canvas) 100%);
    --glow-color: var(--accent);
    --glow-opacity: 0.1;

    /* Semantic Colors - Brighter in dark mode */
    --danger-color: #f87171;
    --danger-rgb: 248, 113, 113;
    --success-color: #4ade80;
    --success-rgb: 74, 222, 128;
    --warning-color: #fb923c;
    --warning-rgb: 251, 146, 60;
    --info-color: #38bdf8;
    --info-rgb: 56, 189, 248;

    /* Overlays & Shadows - Darker in dark mode */
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Global Reset & Base */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Lock the Shell */
}

body {
    background-color: var(--canvas);
    color: var(--text-main);
    font-family: var(--font-sans);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Utilities */
.hidden-scrollbar::-webkit-scrollbar {
    display: none;
}

.hidden-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Global Scrollbar Aesthetics */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.25);
    border-radius: 10px;
    transition: background 0.2s;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.45);
}