/* ============================================
   LIQUID THEME - Design Tokens & CSS Variables
   ============================================ */

:root {
    /* === Color Palette === */
    --color-bg-primary: #0a0a1a;
    --color-bg-secondary: #1a1a3a;
    --color-bg-tertiary: #2d1b69;
    --color-bg-accent: #4a2c5a;

    --color-text-primary: #e8e8ff;
    --color-text-secondary: rgba(232, 232, 255, 0.8);
    --color-text-muted: rgba(232, 232, 255, 0.7);
    --color-text-faded: rgba(232, 232, 255, 0.5);

    --color-accent-cyan: #00d4ff;
    --color-accent-cyan-light: #00e6ff;
    --color-accent-cyan-dark: #0099cc;
    --color-accent-cyan-darker: #00aadd;

    --color-border: #DAD9FC;
    --color-border-subtle: rgba(232, 232, 255, 0.15);
    --color-border-accent: rgba(232, 232, 255, 0.25);
    --color-border-interactive: rgba(232, 232, 255, 0.4);

    --color-success: #4ade80;

    /* === Glass Morphism === */
    --glass-bg: rgba(232, 232, 255, 0.08);
    --glass-bg-hover: rgba(232, 232, 255, 0.12);
    --glass-border: rgba(232, 232, 255, 0.15);
    --glass-border-hover: rgba(232, 232, 255, 0.25);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);

    /* === Spacing === */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* === Border Radius === */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;

    /* === Transitions === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* === Shadows === */
    --shadow-glow-cyan: 0 10px 20px rgba(0, 212, 255, 0.4);

    /* === Filters === */
    --filter-logo-accent: brightness(0) saturate(100%) invert(70%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(1.2) contrast(1.2);
}

/* === Font Families === */
* {
    font-family: 'Inter', sans-serif;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
}

.condiment {
    font-family: 'Condiment', cursive;
}

/* === Base Styles === */
body {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    overflow-x: hidden;
}

/* === Utility Classes === */
.transition-all {
    transition: all var(--transition-base);
}