/* Spello Design System - Tron-Inspired */

:root {
    /* Primary Colors - Cyan/Teal */
    --color-primary: #00d4ff;
    --color-primary-light: #33dfff;
    --color-primary-dark: #00a8cc;
    --color-primary-bg: rgba(0, 212, 255, 0.08);

    /* Secondary Colors - Orange */
    --color-secondary: #ff8800;
    --color-secondary-light: #ffaa33;
    --color-secondary-dark: #cc6d00;

    /* Accent - Neon Purple */
    --color-accent: #bb44ff;
    --color-accent-light: #cc66ff;
    --color-accent-dark: #9933cc;
    --color-accent-bg: rgba(187, 68, 255, 0.08);

    /* Success - Neon Green */
    --color-success: #00ff88;
    --color-success-light: #33ffaa;
    --color-success-dark: #00cc6d;
    --color-success-bg: rgba(0, 255, 136, 0.1);

    /* Error - Neon Pink/Red */
    --color-error: #ff3366;
    --color-error-light: #ff6688;
    --color-error-dark: #cc2952;
    --color-error-bg: rgba(255, 51, 102, 0.1);

    /* Warning - Yellow */
    --color-warning: #ffcc00;
    --color-warning-light: #ffd633;
    --color-warning-dark: #ccaa00;

    /* Backgrounds */
    --color-bg: #0b0e17;
    --color-bg-card: #141821;
    --color-bg-elevated: #1a1f2e;

    /* Text */
    --color-text: #e0e6ed;
    --color-text-light: #8892a4;
    --color-text-muted: #4a5568;
    --color-text-inverse: #0b0e17;

    /* Borders */
    --color-border: #1e2535;
    --color-border-light: #141821;

    /* Shadows - all none, replaced by glow borders */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-glow: 0 0 8px rgba(0, 212, 255, 0.4);
    --shadow-success-glow: 0 0 8px rgba(0, 255, 136, 0.4);

    /* Glow effects */
    --glow-primary: 0 0 8px rgba(0, 212, 255, 0.4);
    --glow-primary-strong: 0 0 12px rgba(0, 212, 255, 0.6);
    --glow-secondary: 0 0 8px rgba(255, 136, 0, 0.4);
    --glow-success: 0 0 8px rgba(0, 255, 136, 0.4);
    --glow-error: 0 0 8px rgba(255, 51, 102, 0.4);
    --glow-accent: 0 0 8px rgba(187, 68, 255, 0.4);
    --glow-warning: 0 0 8px rgba(255, 204, 0, 0.4);

    /* Border Radius - minimal rounding */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 4px;
    --radius-full: 9999px;

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

    /* Typography */
    --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display: 'Orbitron', 'Nunito', sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-size-4xl: 48px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Touch targets */
    --touch-target-min: 48px;
    --touch-target-comfortable: 56px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-index layers */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-tooltip: 500;

    /* XP & Level Colors */
    --color-xp: #ffcc00;
    --color-level-1: #8892a4;
    --color-level-5: #00ff88;
    --color-level-10: #00d4ff;
    --color-level-20: #ff8800;
    --color-level-max: #ff3366;

    /* Streak Colors */
    --color-streak: #ff8800;
    --color-streak-fire: #ff3366;
}

/* Dark theme - already dark base, subtle shifts */
[data-theme="dark"] {
    --color-bg: #080a12;
    --color-bg-card: #10131c;
    --color-bg-elevated: #161a28;
    --color-text: #e8edf4;
    --color-text-light: #8892a4;
    --color-text-muted: #4a5568;
    --color-border: #1a1f2e;
    --color-border-light: #10131c;
}

/* Candy theme */
[data-theme="candy"] {
    --color-primary: #ff44aa;
    --color-primary-light: #ff66bb;
    --color-primary-dark: #cc3388;
    --color-primary-bg: rgba(255, 68, 170, 0.08);
    --color-secondary: #aa44ff;
    --color-accent: #44ddff;
    --color-accent-light: #66eeff;
    --color-accent-bg: rgba(68, 221, 255, 0.08);
    --color-bg: #120a18;
    --color-bg-card: #1a1022;
    --glow-primary: 0 0 8px rgba(255, 68, 170, 0.4);
    --glow-accent: 0 0 8px rgba(68, 221, 255, 0.4);
}

/* Ocean theme */
[data-theme="ocean"] {
    --color-primary: #00ccee;
    --color-primary-light: #33ddff;
    --color-primary-dark: #0099bb;
    --color-primary-bg: rgba(0, 204, 238, 0.08);
    --color-secondary: #4488ff;
    --color-accent: #aa66ff;
    --color-accent-light: #bb88ff;
    --color-accent-bg: rgba(170, 102, 255, 0.08);
    --color-bg: #080e14;
    --color-bg-card: #0e1620;
    --glow-primary: 0 0 8px rgba(0, 204, 238, 0.4);
    --glow-accent: 0 0 8px rgba(170, 102, 255, 0.4);
}

/* Forest theme */
[data-theme="forest"] {
    --color-primary: #00ee66;
    --color-primary-light: #33ff88;
    --color-primary-dark: #00bb44;
    --color-primary-bg: rgba(0, 238, 102, 0.08);
    --color-secondary: #88dd00;
    --color-accent: #ff8844;
    --color-accent-light: #ffaa66;
    --color-accent-bg: rgba(255, 136, 68, 0.08);
    --color-bg: #0a120a;
    --color-bg-card: #101a10;
    --glow-primary: 0 0 8px rgba(0, 238, 102, 0.4);
    --glow-accent: 0 0 8px rgba(255, 136, 68, 0.4);
}