/**
 * Rave Essentials Design Tokens
 *
 * CSS Custom Properties for consistent theming across the site.
 * These variables are used throughout all CSS files to ensure
 * brand consistency and make global style changes easy.
 */

:root {
    /* ================================
       Brand Colors
       ================================ */
    --rave-primary: #ff00ff;           /* Magenta - main brand color */
    --rave-secondary: #00ffff;         /* Cyan - accent color */
    --rave-tertiary: #9900ff;          /* Purple - gradient color */
    --rave-dark: #1a0033;              /* Dark purple - background */
    --rave-darker: #2a0077;            /* Darker purple - gradient end */
    --rave-notice-bg: rgba(40, 0, 40, 0.7);  /* Dark magenta - notice/alert surface */
    --rave-surface-panel: var(--rave-notice-bg);
    --rave-text-primary: #ffffff;
    --rave-text-muted: rgba(255, 255, 255, 0.68);
    --rave-success: #00ff88;
    --rave-danger: #ff5252;
    --rave-warning: #ffcc00;

    /* ================================
       Glow Effects (RGBA variants)
       ================================ */
    --rave-glow-strong: rgba(255, 0, 255, 0.8);
    --rave-glow-medium: rgba(255, 0, 255, 0.5);
    --rave-glow-soft: rgba(255, 0, 255, 0.3);
    --rave-glow-subtle: rgba(255, 0, 255, 0.2);

    --rave-cyan-glow-strong: rgba(0, 255, 255, 0.8);
    --rave-cyan-glow-medium: rgba(0, 255, 255, 0.5);
    --rave-cyan-glow-soft: rgba(0, 255, 255, 0.3);

    /* ================================
       Common Box Shadows
       ================================ */
    --shadow-glow-sm: 0 0 10px var(--rave-glow-medium);
    --shadow-glow-md: 0 0 15px var(--rave-glow-medium);
    --shadow-glow-lg: 0 0 20px var(--rave-glow-medium);
    --shadow-glow-xl: 0 0 30px var(--rave-glow-strong);

    --shadow-cyan-glow-md: 0 0 20px var(--rave-cyan-glow-medium);

    /* ================================
       Common Gradients
       ================================ */
    --gradient-primary: linear-gradient(45deg, var(--rave-primary), var(--rave-tertiary));
    --gradient-background: linear-gradient(135deg, var(--rave-dark), var(--rave-darker));
    --gradient-horizontal: linear-gradient(to right, var(--rave-primary), var(--rave-secondary));
    --gradient-neon: linear-gradient(to right, var(--rave-primary), var(--rave-secondary), var(--rave-primary));

    /* ================================
       Typography
       ================================ */
    --font-primary: 'Orbitron', sans-serif;
    --font-body: Arial, sans-serif;

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

    /* ================================
       Border Radius
       ================================ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* ================================
       Transitions
       ================================ */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ================================
       Z-Index Scale
       ================================ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-cookie-banner: 9999;
}