/**
 * ExamBlaze CSS Variables
 * Brand colors, spacing, and design tokens
 * 
 * @package ExamBlaze
 * @version 1.0
 */

:root {
    /* ========================================
       PRIMARY BRAND COLORS - Use everywhere
       ======================================== */

    /* Main brand colors */
    --primary-blue: #1e40af;        /* Deep professional blue */
    --primary-blue-light: #3b82f6;  /* Lighter blue for hover */
    --primary-blue-dark: #1e3a8a;   /* Darker blue for text/navbar */
    --deep-navy: #1e3a8a;           /* Navbar, footer, dark sections (consistent) */

    --accent-orange: #f97316;       /* Vibrant orange for CTAs */
    --accent-orange-light: #fb923c; /* Light orange for hover */
    --accent-orange-dark: #ea580c;  /* Dark orange for active */
    --light-orange: #fb923c;        /* Hover states, gradients (consistent) */

    /* ========================================
       BACKGROUND COLORS
       ======================================== */

    --bg-white: #ffffff;            /* White backgrounds */
    --bg-light: #f9fafb;            /* Very light gray */
    --bg-lighter: #f3f4f6;          /* Light gray sections */
    --bg-light-blue: #EEF2FF;       /* Light blue sections */
    --bg-dark: #1e3a8a;             /* Dark sections, footer, navbar */

    /* ========================================
       TEXT COLORS
       ======================================== */

    --text-primary: #1f2937;        /* Main text - dark gray */
    --text-secondary: #6b7280;      /* Secondary text - medium gray */
    --text-light: #9ca3af;          /* Light text for less important */
    --text-dark: #1f2937;           /* Primary body text (consistent) */
    --text-muted: #6b7280;          /* Secondary text, captions (consistent) */
    --text-white: #FFFFFF;          /* Text on dark backgrounds */

    /* ========================================
       SEMANTIC COLORS
       ======================================== */

    --success-green: #10b981;       /* Success messages */
    --error-red: #ef4444;           /* Error messages */
    --color-success: #10b981;       /* Success messages, checkmarks (consistent) */
    --color-warning: #F59E0B;       /* Warning messages */
    --color-error: #ef4444;         /* Error messages, alerts (consistent) */
    --color-info: #1e40af;          /* Info messages */

    /* ========================================
       GRADIENTS - Consistent across site
       ======================================== */

    --gradient-blue: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    --gradient-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    --gradient-hero: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
    
    /* ========================================
       SPACING SYSTEM
       ======================================== */
    
    /* Consistent spacing scale (multiples of 4px) */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */
    --space-4xl: 6rem;      /* 96px */
    --space-5xl: 8rem;      /* 128px */
    
    /* ========================================
       TYPOGRAPHY SCALE
       ======================================== */
    
    /* Font families */
    --font-heading: 'Poppins', 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 */
    --text-7xl: 4.5rem;     /* 72px */
    
    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;
    --leading-loose: 2;
    
    /* ========================================
       BORDERS & RADIUS
       ======================================== */
    
    /* Border colors */
    --border-light: #E2E8F0;
    --border-medium: #CBD5E1;
    --border-dark: #94A3B8;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
    
    /* Border widths */
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 4px;
    
    /* ========================================
       SHADOWS
       ======================================== */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Colored shadows for CTAs */
    --shadow-orange: 0 0 20px rgba(255, 122, 0, 0.5);
    --shadow-blue: 0 0 20px rgba(10, 77, 255, 0.3);
    
    /* ========================================
       TRANSITIONS & ANIMATIONS
       ======================================== */
    
    /* Transition durations */
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    
    /* Transition timing functions */
    --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);
    
    /* Common transitions */
    --transition-all: all var(--duration-base) var(--ease-in-out);
    --transition-colors: color var(--duration-base) var(--ease-in-out), 
                         background-color var(--duration-base) var(--ease-in-out), 
                         border-color var(--duration-base) var(--ease-in-out);
    --transition-transform: transform var(--duration-base) var(--ease-in-out);
    
    /* ========================================
       LAYOUT
       ======================================== */
    
    /* Container max widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* Header & footer heights */
    --header-height: 80px;
    --header-top-bar-height: 40px;
    --footer-height: auto;
    
    /* 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;
    
    /* ========================================
       GRID SYSTEM
       ======================================== */
    
    --grid-columns: 12;
    --grid-gap: 1.5rem;
    
    /* ========================================
       BREAKPOINTS
       ======================================== */
    
    /* Mobile first breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* ========================================
       COMPONENT SPECIFIC
       ======================================== */
    
    /* Buttons */
    --btn-padding-y: 14px;
    --btn-padding-x: 32px;
    --btn-radius: var(--radius-lg);
    
    /* Cards */
    --card-padding: var(--space-2xl);
    --card-radius: var(--radius-xl);
    --card-shadow: var(--shadow-md);
    
    /* Input fields */
    --input-height: 48px;
    --input-padding-y: 12px;
    --input-padding-x: 16px;
    --input-radius: var(--radius-md);
    
    /* ========================================
       WHATSAPP FLOAT BUTTON
       ======================================== */
    
    --whatsapp-size: 60px;
    --whatsapp-bottom: 30px;
    --whatsapp-right: 30px;
    
    /* ========================================
       TICKER/MARQUEE
       ======================================== */

    --ticker-height: 50px;
    --ticker-bg: var(--accent-orange);
    --ticker-text: var(--text-white);
}

/* ========================================
   DARK MODE VARIABLES (Future Enhancement)
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Uncomment to enable dark mode support
        --bg-white: #1E293B;
        --bg-light: #0F172A;
        --text-dark: #F1F5F9;
        --text-muted: #CBD5E1;
        */
    }
}