/* variables.css */
:root {
    /* Color Palette */
    --primary: #6200ee;
    --primary-dark: #3700b3;
    --primary-light: #7c4dff;
    --primary-glow: rgba(98, 0, 238, 0.3);
    --secondary: #00e5ff;
    --secondary-dark: #00b8d4;
    --secondary-light: #18ffff;
    --secondary-glow: rgba(0, 229, 255, 0.3);
    --accent-primary: #ff00b8;
    --accent-secondary: #ffab00;
    --accent-tertiary: #00c853;

    /* Text Colors */
    --text-white: #ffffff;
    --text-light: #e0e0e0;
    --text-medium: #9e9e9e;
    --text-dark: #505050;
    --text-black: #121212;

    /* UI Colors */
    --background: #080818;
    --surface: #121228;
    --surface-light: #1e1e3f;
    --border: rgba(85, 85, 155, 0.2);
    --divider: rgba(255, 255, 255, 0.1);

    /* Status Colors */
    --error: #ff6b6b;
    --success: #00e676;
    --warning: #ffab00;
    --info: #2196f3;

    /* Typography */
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;

    /* 12px */
    --text-sm: 0.875rem;

    /* 14px */
    --text-base: 1rem;

    /* 16px */
    --text-lg: 1.125rem;

    /* 18px */
    --text-xl: 1.25rem;

    /* 20px */
    --text-2xl: 1.5rem;

    /* 24px */
    --text-3xl: 1.875rem;

    /* 30px */
    --text-4xl: 2.25rem;

    /* 36px */
    --text-5xl: 3rem;

    /* 48px */
    --text-6xl: 3.75rem;

    /* 60px */
    /* Spacing */
    --space-1: 0.25rem;

    /* 4px */
    --space-2: 0.5rem;

    /* 8px */
    --space-3: 0.75rem;

    /* 12px */
    --space-4: 1rem;

    /* 16px */
    --space-5: 1.5rem;

    /* 24px */
    --space-6: 2rem;

    /* 32px */
    --space-8: 3rem;

    /* 48px */
    --space-10: 4rem;

    /* 64px */
    --space-12: 5rem;

    /* 80px */
    --space-16: 8rem;

    /* 128px */
    /* Layout */
    --container-padding: 1rem;
    --container-max-width: 1400px;

    /* Borders & Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-spring: 0.5s cubic-bezier(0.19, 1, 0.22, 1);

    /* Z-index Layers */
    --z-background: -1;
    --z-default: 1;
    --z-above: 5;
    --z-sticky: 100;
    --z-header: 1000;
    --z-modal: 2000;
    --z-popup: 3000;
    --z-top: 9999;
}

/* Media Query Breakpoints (for reference) 
   These would be used with media queries in other CSS files
   
   --breakpoint-xs: 0px      (for mobile phones)
   --breakpoint-sm: 576px    (for tablets)
   --breakpoint-md: 768px    (for small desktops)
   --breakpoint-lg: 992px    (for medium desktops)
   --breakpoint-xl: 1200px   (for large desktops)
   --breakpoint-xxl: 1400px  (for extra large screens) */
/* Dark Mode Variables (can be toggled via JS) */
.dark-mode {
    /* Adjusted color palette for dark mode if needed */
}