:root {
    /* Base Shadow Variable */
    --color-shadow: var(--color-shadow);

    /* Colors */
    --color-error-container: #ffdad6;
    --color-on-primary-fixed: #370e00;
    --color-error: #ba1a1a;
    --color-on-tertiary: #ffffff;
    --color-primary-container: #ff5c00;
    --color-background: #fff8f6;
    --color-on-error: #ffffff;
    --color-outline-variant: #e4beb1;
    --color-tertiary-container: #00aa28;
    --color-secondary: #0035c6;
    --color-secondary-container: #0448ff;
    --color-surface-container-highest: #fadcd2;
    --color-on-primary-container: #521800;
    --color-primary-fixed-dim: #ffb59a;
    --color-surface-dim: #f1d4ca;
    --color-on-primary-fixed-variant: #802a00;
    --color-tertiary: #006e16;
    --color-inverse-primary: #ffb59a;
    --color-surface-container: #ffe9e2;
    --color-surface-container-lowest: #ffffff;
    --color-inverse-on-surface: #ffede7;
    --color-on-secondary-fixed: #001257;
    --color-primary: #a73a00;
    --color-on-primary: #ffffff;
    --color-on-surface-variant: #5b4137;
    --color-on-surface: #271812;
    --color-surface-container-high: #ffe2d8;
    --color-on-error-container: #93000a;
    --color-on-tertiary-fixed: #002203;
    --color-surface: #fff8f6;
    --color-on-secondary-fixed-variant: #0033c0;
    --color-outline: #8f7065;
    --color-on-background: #271812;
    --color-surface-tint: #a73a00;
    --color-on-secondary-container: #d6daff;
    --color-secondary-fixed-dim: #b9c3ff;
    --color-on-secondary: #ffffff;
    --color-primary-fixed: #ffdbce;
    --color-inverse-surface: #3e2c26;
    --color-surface-bright: #fff8f6;
    --color-secondary-fixed: #dde1ff;
    --color-on-tertiary-container: #003406;
    --color-tertiary-fixed: #72ff70;
    --color-surface-container-low: #fff1ec;
    --color-surface-variant: #fadcd2;
    --color-tertiary-fixed-dim: #00e639;
    --color-on-tertiary-fixed-variant: #00530e;

    /* Border Radius */
    --radius-default: 0.125rem;
    --radius-lg: 0.25rem;
    --radius-xl: 0.5rem;
    --radius-full: 0.75rem;

    /* Spacing */
    --spacing-border-thick: 6px;
    --spacing-container-padding: 20px;
    --spacing-border-thin: 2px;
    --spacing-section-gap: 64px;
    --spacing-base: 8px;
    --spacing-element-gap: 24px;

    /* Font Families */
    --font-body-md: 'Hanken Grotesk', sans-serif;
    --font-headline-lg: 'Bricolage Grotesque', sans-serif;
    --font-headline-md: 'Bricolage Grotesque', sans-serif;
    --font-display-lg-mobile: 'Bricolage Grotesque', sans-serif;
    --font-code-sm: 'JetBrains Mono', monospace;
    --font-body-lg: 'Hanken Grotesk', sans-serif;
    --font-display-lg: 'Bricolage Grotesque', sans-serif;
    --font-data-label: 'JetBrains Mono', monospace;

    /* Font Sizes... */
    --text-body-md-size: 16px;
    --text-body-md-line-height: 24px;
    --text-body-md-weight: 400;
    --text-headline-lg-size: clamp(32px, 5vw, 48px);
    --text-headline-lg-line-height: clamp(40px, 6vw, 56px);
    --text-headline-lg-weight: 700;
    --text-headline-md-size: clamp(24px, 4vw, 32px);
    --text-headline-md-line-height: clamp(32px, 5vw, 40px);
    --text-headline-md-weight: 700;
    --text-display-lg-mobile-size: clamp(48px, 8vw, 84px);
    --text-display-lg-mobile-line-height: clamp(52px, 8.5vw, 90px);
    --text-display-lg-mobile-weight: 800;
    --text-display-lg-mobile-spacing: -0.02em;
    --text-code-sm-size: 13px;
    --text-code-sm-line-height: 18px;
    --text-code-sm-weight: 400;
    --text-body-lg-size: 18px;
    --text-body-lg-line-height: 28px;
    --text-body-lg-weight: 400;
    --text-display-lg-size: clamp(48px, 8vw, 84px);
    --text-display-lg-line-height: clamp(52px, 8.5vw, 90px);
    --text-display-lg-weight: 800;
    --text-display-lg-spacing: -0.04em;
    --text-data-label-size: 14px;
    --text-data-label-line-height: 20px;
    --text-data-label-weight: 500;
    --text-data-label-spacing: 0.05em;
}

@media (min-width: 768px) {
    :root {
        --spacing-container-padding: 40px;
        --spacing-section-gap: 120px;
    }
}

/* Dark Mode Theme (Midnight - Cool Grays) */
:root.theme-dark {
    --color-shadow: #000000;
    --color-background: #0f1115;
    --color-on-background: #f1f3f5;
    --color-surface: #1a1d24;
    --color-on-surface: #f1f3f5;
    --color-surface-variant: #252932;
    --color-on-surface-variant: #c1c7d0;
    --color-surface-container-lowest: #0a0b0e;
    --color-surface-container-low: #14161c;
    --color-surface-container: #1c1f27;
    --color-surface-container-high: #242832;
    --color-surface-container-highest: #2c313d;
    
    --color-primary: #ff8c42;
    --color-on-primary: #000000;
    --color-primary-container: #ff8c42;
    --color-on-primary-container: #000000;
    --color-primary-fixed: #ff8c42;
    
    --color-secondary: #42a5ff;
    --color-on-secondary: #000000;
    --color-secondary-container: #42a5ff;
    --color-on-secondary-container: #000000;
    
    --color-tertiary: #42ff9c;
    --color-on-tertiary: #000000;
    --color-tertiary-container: #42ff9c;
    --color-on-tertiary-container: #000000;
    
    --color-error: #ff5252;
    --color-on-error: #000000;
    --color-error-container: #ff5252;
    --color-on-error-container: #ffffff;
    
    --color-outline: #f1f3f5;
    --color-outline-variant: #4a5160;
    --color-inverse-surface: #f1f3f5;
    --color-inverse-on-surface: #0f1115;
    --color-primary-fixed: #b3c5ff;
    --color-on-primary-fixed: #002a7a;
    --color-secondary-fixed: #cce5ff;
    --color-on-secondary-fixed: #003366;
    --color-tertiary-fixed: #b3ffe0;
    --color-on-tertiary-fixed: #004d33;
    --color-surface-bright: #3c4049;
    --color-surface-dim: #0f1115;
}

/* Cyberpunk Theme */
:root.theme-cyberpunk {
    --color-shadow: #ff0055;
    --color-background: #0a0a0a;
    --color-on-background: #ffffff;
    --color-surface: #121212;
    --color-on-surface: #ffffff;
    --color-surface-variant: #1a1a1a;
    --color-on-surface-variant: #cccccc;
    --color-surface-container-lowest: #000000;
    --color-surface-container-low: #050505;
    --color-surface-container: #0f0f0f;
    --color-surface-container-high: #141414;
    --color-surface-container-highest: #1a1a1a;
    
    --color-primary: #00f0ff;
    --color-on-primary: #000000;
    --color-primary-container: #00f0ff;
    --color-on-primary-container: #000000;
    --color-primary-fixed: #00f0ff;
    
    --color-secondary: #ff0055;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #ff0055;
    --color-on-secondary-container: #ffffff;
    
    --color-tertiary: #fcee0a;
    --color-on-tertiary: #000000;
    --color-tertiary-container: #fcee0a;
    --color-on-tertiary-container: #000000;
    
    --color-error: #ff2a75;
    --color-on-error: #ffffff;
    --color-error-container: #ff2a75;
    --color-on-error-container: #ffffff;
    
    --color-outline: #00f0ff;
    --color-outline-variant: #ff0055;
    --color-inverse-surface: #00f0ff;
    --color-inverse-on-surface: #000000;
    --color-primary-fixed: #ff6699;
    --color-on-primary-fixed: #33001a;
    --color-secondary-fixed: #66ffff;
    --color-on-secondary-fixed: #003333;
    --color-tertiary-fixed: #ffff66;
    --color-on-tertiary-fixed: #333300;
    --color-surface-bright: #222222;
    --color-surface-dim: #050505;
}

/* Minimalist Theme */
:root.theme-minimal {
    --color-shadow: #000000;
    --color-background: #ffffff;
    --color-on-background: #000000;
    --color-surface: #f5f5f5;
    --color-on-surface: #111111;
    --color-surface-variant: #e0e0e0;
    --color-on-surface-variant: #555555;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #fcfcfc;
    --color-surface-container: #f5f5f5;
    --color-surface-container-high: #ededed;
    --color-surface-container-highest: #e0e0e0;
    
    --color-primary: #000000;
    --color-on-primary: #ffffff;
    --color-primary-container: #000000;
    --color-on-primary-container: #ffffff;
    --color-primary-fixed: #cccccc;
    
    --color-secondary: #333333;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #333333;
    --color-on-secondary-container: #ffffff;
    
    --color-tertiary: #666666;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #666666;
    --color-on-tertiary-container: #ffffff;
    
    --color-error: #cc0000;
    --color-on-error: #ffffff;
    --color-error-container: #cc0000;
    --color-on-error-container: #ffffff;
    
    --color-outline: #000000;
    --color-outline-variant: #cccccc;
    --color-inverse-surface: #111111;
    --color-inverse-on-surface: #ffffff;
    --color-primary-fixed: #e0e0e0;
    --color-on-primary-fixed: #111111;
    --color-secondary-fixed: #eeeeee;
    --color-on-secondary-fixed: #222222;
    --color-tertiary-fixed: #f5f5f5;
    --color-on-tertiary-fixed: #333333;
    --color-surface-bright: #ffffff;
    --color-surface-dim: #f0f0f0;
}