/* ============================================
   THEME CSS - Education Next Consultancy
   Variables for Dark and Light Modes
   ============================================ */

/* Dark Theme (Default) */
:root {
    /* Primary Backgrounds */
    --bg-primary: #0a0a0a;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #0d0d0d;
    --bg-card: #111111;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    
    /* Border Colors */
    --border-color: rgba(255, 51, 51, 0.2);
    --border-light: rgba(255, 255, 255, 0.1);
    
    /* Accent Colors */
    --accent-color: #ff3333;
    --accent-dark: #cc0000;
    --accent-light: #ff6666;
    --accent-glow: rgba(255, 51, 51, 0.4);
    
    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-glow: rgba(255, 51, 51, 0.3);
    
    /* Header Backgrounds */
    --header-bg: rgba(10, 10, 10, 0.95);
    --header-bg-scrolled: rgba(5, 5, 5, 0.98);
    --mobile-nav-bg: #0a0a0a;
    
    /* Input Backgrounds */
    --input-bg: #1a1a1a;
    
    /* Logo Gradient */
    --logo-gradient: linear-gradient(135deg, #ffffff, #ff3333);
    
    /* Hero Section - Dark Mode */
    --hero-gradient: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.8));
    --hero-text: #ffffff;
    --hero-subtitle: #dddddd;
    --hero-badge-bg: rgba(255, 51, 51, 0.2);
    --hero-badge-border: rgba(255, 51, 51, 0.5);
}

/* Light Theme Override */
body[data-theme="light"] {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f5f5;
    --bg-card: #ffffff;
    
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --text-muted: #888888;
    
    --border-color: rgba(230, 57, 70, 0.15);
    --border-light: rgba(0, 0, 0, 0.1);
    
    --accent-color: #e63946;
    --accent-dark: #c1121f;
    --accent-light: #ff6b6b;
    --accent-glow: rgba(230, 57, 70, 0.25);
    
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-glow: rgba(230, 57, 70, 0.2);
    
    --header-bg: rgba(255, 255, 255, 0.95);
    --header-bg-scrolled: rgba(255, 255, 255, 0.98);
    --mobile-nav-bg: #ffffff;
    
    --input-bg: #ffffff;
    
    --logo-gradient: linear-gradient(135deg, #1a1a1a, #e63946);
    
    /* Hero Section - Light Mode (same text colors as dark mode) */
    --hero-gradient: linear-gradient(135deg, rgba(0,0,0,0.75), rgba(0,0,0,0.85));
    --hero-text: #ffffff;
    --hero-subtitle: #eeeeee;
    --hero-badge-bg: rgba(255, 255, 255, 0.15);
    --hero-badge-border: rgba(255, 255, 255, 0.3);
}

/* Smooth Theme Transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Poppins', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
}

/* Container Max Width */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-dark);
}

/* Selection Color */
::selection {
    background: var(--accent-color);
    color: white;
}