:root {
    /* Color Palette - Light Mode */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-rgb: 37, 99, 235;
    --color-bg-body: #f8fafc;
    --color-bg-body-rgb: 248, 250, 252;
    --color-bg-surface: #ffffff;
    --color-bg-surface-rgb: 255, 255, 255;
    --color-bg-surface-alt: #f1f5f9;
    --color-bg-surface-alt-rgb: 241, 245, 249;
    --color-text-main: #0f172a;
    --color-text-main-rgb: 15, 23, 42;
    --color-text-secondary: #475569;
    --color-text-muted: #94a3b8;
    --color-mark-bg: #fef08a;
    --color-mark-text: #854d0e;
    --color-border: #e2e8f0;
    --color-border-rgb: 226, 232, 240;
    --color-shadow: rgba(0, 0, 0, 0.05);
    --color-overlay: rgba(0, 0, 0, 0.3);
    --color-tooltip-bg: rgba(0, 0, 0, 0.85);
    --color-tooltip-text: #ffffff;
    --color-tooltip-border: rgba(255, 255, 255, 0.1);
    
    /* Spacing & Layout */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --container-width: 1200px;
    --header-height: 64px;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;

    /* Hero */
    --hero-height: calc(100dvh - var(--header-height));
    --hero-min-height: calc(600px - var(--header-height));
    --hero-mobile-height: calc(90dvh - var(--header-height));
    --hero-mobile-min-height: calc(480px - var(--header-height));
    --hero-bg-scale: 1.05;
    --hero-overlay-spot-size-x: 1200px;
    --hero-overlay-spot-size-y: 500px;
    --hero-overlay-spot-x: 70%;
    --hero-overlay-spot-y: 10%;
    --hero-overlay-spot-rgb: 37, 99, 235;
    --hero-overlay-spot-alpha: 0.35;
    --hero-overlay-dark-rgb: 7, 12, 24;
    --hero-overlay-start-alpha: 0.35;
    --hero-overlay-mid-alpha: 0.7;
    --hero-overlay-end-alpha: 0.85;
    --hero-title-max-width: 760px;
    --hero-subtitle-max-width: 600px;
    --hero-text-color: #ffffff;
    --hero-text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --hero-button-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
    --hero-button-hover-bg: #0f172a;
    --hero-progress-width: 240px;
    --hero-progress-height: 3px;
    --hero-progress-radius: 999px;
    --hero-progress-bg: rgba(255, 255, 255, 0.25);
    --hero-progress-fill: rgba(255, 255, 255, 0.95);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;

    /* Status Colors */
    --color-status-connected: #22c55e;
    --color-status-connected-shadow: rgba(34, 197, 94, 0.4);
    --color-status-disconnected: #94a3b8;
    --color-status-error: #ef4444;
    --color-status-success: #10b981;
    --color-status-warning: #f59e0b;
    --color-status-info: #3b82f6;
}

@media (max-width: 768px) {
    :root {
        --spacing-md: 0.75rem;
        --spacing-lg: 1rem;
        --spacing-xl: 1.25rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Color Palette - Dark Mode */
        --color-primary: #3b82f6;
        --color-primary-hover: #60a5fa;
        --color-primary-rgb: 59, 130, 246;
        --color-bg-body: #06070b;
        --color-bg-body-rgb: 6, 7, 11;
        --color-bg-surface: #0d1117;
        --color-bg-surface-rgb: 13, 17, 23;
        --color-bg-surface-alt: #161b22;
        --color-bg-surface-alt-rgb: 22, 27, 34;
        --color-text-main: #f1f5f9;
        --color-text-main-rgb: 241, 245, 249;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #64748b;
        --color-mark-bg: rgba(234, 179, 8, 0.2);
        --color-mark-text: #fde047;
        --color-border: #1f2430;
        --color-border-rgb: 31, 36, 48;
        --color-shadow: rgba(0, 0, 0, 0.6);
        --color-overlay: rgba(0, 0, 0, 0.6);
        --color-tooltip-bg: rgba(0, 0, 0, 0.85);
        --color-tooltip-text: #f8fafc;
        --color-tooltip-border: rgba(255, 255, 255, 0.1);

        /* Hero - Dark Mode */
        --hero-overlay-spot-alpha: 0.25;
        --hero-overlay-start-alpha: 0.5;
        --hero-overlay-mid-alpha: 0.8;
        --hero-overlay-end-alpha: 0.9;
        --hero-button-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
        --hero-button-hover-bg: #020617;
        --hero-progress-bg: rgba(255, 255, 255, 0.22);
        --hero-progress-fill: rgba(255, 255, 255, 0.92);
    }
}