/* ============================================
   Theme Variables - Dark & Light Mode
   ============================================ */

:root {
    /* Dark Theme (Default) */
    --bg-primary: #0a192f;
    --bg-secondary: #112240;
    --bg-tertiary: #1a2f4a;
    --bg-card: #172a45;
    --bg-card-hover: #1e3a5f;

    --text-primary: #e6f1ff;
    --text-secondary: #a8b2d1;
    --text-tertiary: #8892b0;
    --text-muted: #495670;

    --accent-primary: #64ffda;
    --accent-secondary: #00d9ff;
    --accent-tertiary: #5acbf5;
    --accent-glow: rgba(100, 255, 218, 0.1);

    --border-color: #233554;
    --border-hover: #2e4a6a;

    --shadow-sm: 0 2px 8px rgba(2, 12, 27, 0.7);
    --shadow-md: 0 4px 16px rgba(2, 12, 27, 0.7);
    --shadow-lg: 0 8px 32px rgba(2, 12, 27, 0.8);
    --shadow-glow: 0 0 20px rgba(100, 255, 218, 0.15);

    --gradient-primary: linear-gradient(135deg, #64ffda 0%, #00d9ff 100%);
    --gradient-secondary: linear-gradient(135deg, #0a192f 0%, #1a2f4a 100%);
    --gradient-accent: linear-gradient(90deg, #64ffda 0%, #5acbf5 50%, #00d9ff 100%);

    --terminal-bg: #010c1a;
    --terminal-text: #00ff00;
    --terminal-prompt: #64ffda;

    --nav-height: 70px;
    --transition-speed: 0.3s;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f3f5;

    --text-primary: #1a202c;
    --text-secondary: #2d3748;
    --text-tertiary: #4a5568;
    --text-muted: #718096;

    --accent-primary: #0ea5e9;
    --accent-secondary: #0284c7;
    --accent-tertiary: #0369a1;
    --accent-glow: rgba(14, 165, 233, 0.1);

    --border-color: #e2e8f0;
    --border-hover: #cbd5e0;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.15);

    --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --gradient-secondary: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --gradient-accent: linear-gradient(90deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);

    --terminal-bg: #1a202c;
    --terminal-text: #10b981;
    --terminal-prompt: #0ea5e9;
}

/* Typography */
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

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

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
}

/* Spacing */
:root {
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;
    --spacing-5xl: 8rem;
}

/* Border Radius */
:root {
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
}

/* Z-Index Layers */
:root {
    --z-background: -1;
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;
}

/* Breakpoints (for reference in media queries) */
:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* Animation Timings */
:root {
    --transition-fast: 0.15s;
    --transition-base: 0.3s;
    --transition-slow: 0.5s;
    --transition-slower: 0.7s;

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}