/* Modern Holographic Theme Tokens */

:root {
    /* Colors */
    --bg-color: #050505;
    --surface-glass: rgba(255, 255, 255, 0.05);
    --surface-glass-hover: rgba(255, 255, 255, 0.1);
    --surface-glass-hover: rgba(255, 255, 255, 0.1);
    --border-glass: rgba(255, 255, 255, 0.1);
    --footer-bg: rgba(5, 5, 5, 0.3);

    --text-main: #FFFFFF;
    --text-muted: #b0b0b0;

    --accent-purple: #7B2CBF;
    --accent-blue: #4CC9F0;
    --accent-gradient: linear-gradient(135deg, #7B2CBF, #4CC9F0);

    --text-gradient-dark: linear-gradient(135deg, #E0AAFF, #9D4EDD);
    /* Vibrant Purple/Pink */
    --text-gradient-light: linear-gradient(135deg, #3A0CA3, #4361EE);
    /* Deep Blue/Purple */

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 64px;

    /* Typography */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    --h1-size: 3.5rem;
    --h2-size: 2rem;
    --h3-size: 1.5rem;
    --body-size: 1rem;
    --small-size: 0.875rem;

    /* Effects */
    --radius-lg: 32px;
    /* Softer, modern corners */
    --radius-md: 16px;
    --blur-amount: 20px;
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Light Mode Tokens */
body.light-mode {
    --bg-color: #F0F2F5;
    /* Slightly darker white */
    --surface-glass: rgba(255, 255, 255, 0.85);
    /* High contrast glass */
    --surface-glass-hover: rgba(255, 255, 255, 0.95);
    --surface-glass-hover: rgba(255, 255, 255, 0.95);
    --border-glass: rgba(0, 0, 0, 0.1);
    --footer-bg: rgba(255, 255, 255, 0.8);

    --text-main: #000000;
    /* Pure Black */
    --text-muted: #444444;
    /* Dark Gray */

    --accent-purple: #5e17eb;
    /* Slightly darker for contrast */
    --accent-blue: #0071e3;
    --accent-gradient: linear-gradient(135deg, #5e17eb, #0071e3);

    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Midnight Theme Tokens */
body.midnight-theme {
    --bg-color: #021017;
    /* Deep Midnight Blue */
    --surface-glass: rgba(2, 20, 30, 0.6);
    --surface-glass-hover: rgba(2, 20, 30, 0.8);
    --surface-glass-hover: rgba(2, 20, 30, 0.8);
    --border-glass: rgba(76, 201, 240, 0.1);
    --footer-bg: rgba(76, 201, 240, 0.1);

    --text-main: #E0F7FA;
    --text-muted: #81D4FA;

    --accent-purple: #4CC9F0;
    /* Cyan */
    --accent-blue: #4361EE;
    /* Blue */
    --accent-gradient: linear-gradient(135deg, #4CC9F0, #4361EE);

    --text-gradient-dark: linear-gradient(135deg, #4CC9F0, #48CAE4);
    --text-gradient-light: linear-gradient(135deg, #4CC9F0, #48CAE4);
}