/* CSS Custom Properties (Variables) */
:root {
    /* Base Colors - Dark Theme First Approach */
    --primary-color: #c41e3a;      /* Canadian Red */
    --primary-hover: #a91829;      /* Darker red for hover states */
    --primary-light: rgba(196, 30, 58, 0.1); /* Light primary for backgrounds */
    
    /* Background Colors */
    --bg-primary: #0f1219;         /* Darkest background (navbar, footer) */
    --bg-secondary: #1a1e2c;       /* Main background (body) */
    --bg-tertiary: #1f2937;        /* Card/container backgrounds */
    --bg-quaternary: #2d3748;      /* Lighter backgrounds (headers) */
    --bg-input: #1a1e2c;          /* Input field backgrounds */
    
    /* Text Colors */
    --text-primary: #e2e8f0;       /* Primary text (headings, labels) */
    --text-secondary: #9ca3af;     /* Secondary text (descriptions) */
    --text-muted: #6b7280;         /* Muted text (help text, placeholders) */
    --text-inverse: #1a1e2c;       /* Dark text for light backgrounds */
    
    /* Border Colors */
    --border-primary: #374151;     /* Primary border color */
    --border-secondary: #2d3748;   /* Secondary border color */
    --border-light: #4b5563;       /* Lighter border for emphasis */
    
    /* Interactive States */
    --hover-bg: rgba(255, 255, 255, 0.05); /* Light hover background */
    --focus-ring: rgba(196, 30, 58, 0.25);  /* Focus ring color */
    --active-bg: rgba(196, 30, 58, 0.1);    /* Active state background */
    
    /* Status Colors - Comprehensive Dark Theme Support */
    --success-color: #48bb78;
    --success-bg: #1a2e1a;
    --success-border: #2d5a2d;
    --success-text: #9ae6b4;
    --success-hover: #38a169;
    
    --danger-color: #f56565;
    --danger-bg: #2d1b1b;
    --danger-border: #5a2d2d;
    --danger-text: #feb2b2;
    --danger-hover: #e53e3e;
    
    --warning-color: #ed8936;
    --warning-bg: #2d2419;
    --warning-border: #5a4a2d;
    --warning-text: #fbd38d;
    --warning-hover: #dd6b20;
    
    --info-color: #4299e1;
    --info-bg: #1a2332;
    --info-border: #2d4a66;
    --info-text: #90cdf4;
    --info-hover: #3182ce;
    
    /* Legacy Color Aliases for Backward Compatibility */
    --secondary-color: var(--bg-secondary);
    --accent-color: #003366;       /* Navy Blue */
    --dark-color: var(--bg-primary);
    --light-text: var(--text-primary);
    --gray-color: var(--text-secondary);
    --light-gray: var(--bg-quaternary);
    --border-color: var(--border-primary);
    --background-light: var(--bg-tertiary);
    
    /* Typography */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-secondary: 'Arial', sans-serif;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    
    /* Spacing */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 2.5rem;   /* 40px */
    --spacing-3xl: 3rem;     /* 48px */
    --spacing-4xl: 4rem;     /* 64px */
    --spacing-5xl: 5rem;     /* 80px */
    
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 20px;
    --container-padding-mobile: 15px;
    
    /* Border & Radius */
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 50%;
    
    --border-width: 1px;
    --border-width-thick: 2px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 10px 27px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* 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;
    
    /* Navbar specific */
    --navbar-height: 70px;
}

/* Component-Specific Variables */
:root {
    /* Navbar */
    --navbar-bg: var(--bg-primary);
    --navbar-text: var(--text-primary);
    --navbar-link-hover: var(--primary-color);
    --navbar-mobile-bg: var(--bg-primary);
    
    /* Footer */
    --footer-bg: var(--bg-primary);
    --footer-text: var(--text-primary);
    --footer-text-secondary: var(--text-secondary);
    --footer-text-muted: var(--text-muted);
    
    /* Forms */
    --form-bg: var(--bg-input);
    --form-text: var(--text-primary);
    --form-border: var(--border-primary);
    --form-border-focus: var(--primary-color);
    --form-placeholder: var(--text-muted);
    --form-label: var(--text-primary);
    
    /* Cards */
    --card-bg: var(--bg-tertiary);
    --card-header-bg: var(--bg-quaternary);
    --card-text: var(--text-primary);
    --card-text-secondary: var(--text-secondary);
    --card-border: var(--border-primary);
    
    /* Tables */
    --table-bg: var(--bg-tertiary);
    --table-header-bg: var(--bg-quaternary);
    --table-text: var(--text-primary);
    --table-border: var(--border-primary);
    --table-stripe-bg: var(--bg-quaternary);
    
    /* Modals */
    --modal-bg: var(--bg-tertiary);
    --modal-header-bg: var(--bg-quaternary);
    --modal-text: var(--text-primary);
    --modal-border: var(--border-primary);
    
    /* Buttons - Enhanced */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-text: var(--text-primary);
    --btn-primary-hover-bg: var(--primary-hover);
    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-border: var(--text-primary);
    --btn-secondary-hover-bg: var(--text-primary);
    --btn-secondary-hover-text: var(--text-inverse);
}

/* Light theme override (for future use or user preference) */
@media (prefers-color-scheme: light) {
    :root {
        /* This section can be expanded if light theme support is needed */
        /* Currently, the site is designed as dark-first */
    }
}