/* CSS Custom Properties - Cyberpunk Monochrome Theme */
:root {
    /* Colors - Monochrome base with cyberpunk accents */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-900: #0a0a0a;
    --color-gray-800: #1a1a1a;
    --color-gray-700: #2a2a2a;
    --color-gray-600: #404040;
    --color-gray-500: #6b6b6b;
    --color-gray-400: #9a9a9a;
    --color-gray-300: #b8b8b8;
    --color-gray-200: #d4d4d4;
    --color-gray-100: #e8e8e8;
    
    /* Cyberpunk accent colors */
    --color-cyan: #00ffff;
    --color-magenta: #ff00ff;
    --color-cyan-glow: rgba(0, 255, 255, 0.3);
    --color-magenta-glow: rgba(255, 0, 255, 0.3);
    
    /* Semantic colors */
    --color-primary: var(--color-cyan);
    --color-secondary: var(--color-magenta);
    --color-background: var(--color-black);
    --color-surface: var(--color-gray-900);
    --color-text: var(--color-white);
    --color-text-secondary: var(--color-gray-300);
    --color-border: var(--color-gray-700);
    
    /* Typography - Extra large impact sizes */
    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    --font-size-xs: 0.875rem;      /* 14px */
    --font-size-sm: 1rem;          /* 16px */
    --font-size-base: 1.125rem;    /* 18px */
    --font-size-lg: 1.5rem;        /* 24px */
    --font-size-xl: 2rem;          /* 32px */
    --font-size-2xl: 3rem;         /* 48px */
    --font-size-3xl: 4rem;         /* 64px */
    --font-size-4xl: 5rem;         /* 80px */
    --font-size-5xl: 6.5rem;       /* 104px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing - Large whitespace rhythm */
    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 1rem;        /* 16px */
    --space-md: 2rem;        /* 32px */
    --space-lg: 4rem;        /* 64px */
    --space-xl: 6rem;        /* 96px */
    --space-2xl: 8rem;       /* 128px */
    --space-3xl: 12rem;      /* 192px */
    --space-4xl: 16rem;      /* 256px */
    
    /* Layout */
    --container-max-width: 1400px;
    --sidebar-width: 320px;
    --sidebar-width-collapsed: 80px;
    
    /* Border radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Shadows with neon glow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.8);
    --shadow-cyan: 0 0 20px var(--color-cyan-glow), 0 0 40px var(--color-cyan-glow);
    --shadow-magenta: 0 0 20px var(--color-magenta-glow), 0 0 40px var(--color-magenta-glow);
    
    /* Z-index scale */
    --z-sidebar: 1000;
    --z-nav: 100;
    --z-overlay: 50;
    --z-base: 1;
}