/* =======================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =======================================================================
   All CSS variables organized by category for easy maintenance.
   Variables support both light and dark mode themes.
   ======================================================================= */

/* ============================================
   LIGHT MODE THEME (DEFAULT)
   ============================================ */
:root {
    /* Brand Colors */
    --brand-primary-dark: #1c2b4c; /* Navy/Dark Blue from logo */
    --brand-accent-orange: #eb8132; /* Orange/Gold from logo */
    --brand-accent-orange-light: #f4a261; /* Lighter orange for hover states */
    --brand-accent-orange-dark: #d4732b; /* Darker orange for active states */
    --brand-white: #ffffff; /* White from logo */

    /* Background Colors */
    --bg-primary: #FFF8F0; /* Very subtle desaturated light orange */
    --bg-secondary: var(--brand-white); /* White for sections/cards */

    /* Text Colors */
    --text-color: var(--brand-primary-dark); /* Dark blue text on light backgrounds */
    --text-color-light: #555; /* For secondary/lighter text (neutral dark gray) */

    /* Header */
    --header-bg: var(--brand-primary-dark);
    --header-text: var(--brand-white);

    /* Buttons */
    --button-bg: var(--brand-accent-orange);
    --button-hover-bg: #d4732b; /* Slightly darker orange */
    --button-shadow: rgba(0,0,0,0.15);
    --button-hover-shadow: rgba(0,0,0,0.2);

    /* Forms & Inputs */
    --input-border: #ccc;
    --input-focus-shadow: rgba(52, 152, 219, 0.2);

    /* Code Blocks */
    --code-bg: #f5f5f5;
    --code-text: #333;

    /* Borders & Shadows */
    --border-color: rgba(28,43,76,0.1); /* Subtle blue tint for borders */
    --shadow-light: rgba(0,0,0,0.05);
    --shadow-medium: rgba(0,0,0,0.08);

    /* Footer */
    --footer-bg: var(--brand-primary-dark); /* Dark blue for footer top row */
    --footer-text: var(--brand-white); /* White for footer */
    --footer-copyright-bg: var(--bg-primary); /* Match primary background */
    --footer-copyright-text: var(--brand-white); /* White in light mode */

    /* Links */
    --link-color: var(--brand-primary-dark); /* Dark blue for links in light mode */
    --link-hover-color: var(--brand-accent-orange); /* Orange on hover in light mode */

    /* Status Colors */
    --success-color: #27ae60; /* Green for success states */
    --error-color: #e74c3c; /* Red for error states */
    --warning-color: #f39c12; /* Yellow for warning states */

    /* Additional UI Colors */
    --text-muted: #666666; /* Muted text color */
    --bg-hover: #f8f9fa; /* Hover background color */
    --primary-color: var(--brand-accent-orange); /* Alias for primary color */
    --primary-dark: var(--brand-accent-orange-dark); /* Alias for primary dark */
    
    /* Card backgrounds */
    --card-bg: var(--brand-white);
    --card-bg-hover: #f0f2f5; /* Slightly darker for hover */
    
    /* Input styling */
    --input-bg: var(--brand-white);
    --input-text: var(--brand-primary-dark);
    
    /* Table styling */
    --table-header-bg: var(--brand-primary-dark);
    --table-header-text: var(--brand-white);
    --table-row-hover-bg: var(--gray-50);
    
    /* Modal styling */
    --modal-bg: var(--brand-white);
    --modal-text: var(--brand-primary-dark);
    --modal-border: var(--border-color);
    --modal-header-bg: var(--gray-50);
    --modal-footer-bg: var(--gray-50);
    
    /* Button styling */
    --button-primary-bg: var(--brand-accent-orange);
    --button-primary-text: var(--brand-white);
    --button-secondary-bg: #e3f0ff;
    --button-secondary-text: #1a4fa3;
    --button-secondary-border: #b6d4fe;

    /* Gray Scale */
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #e1e5e9;
    --gray-400: #adb5bd;
    --gray-500: #6c757d;
    --gray-600: #495057;
    --gray-700: #343a40;
    --gray-800: #212529;

    /* Semantic Colors */
    --color-white: #ffffff;
    --color-success: #28a745;
    --color-error: #dc3545;

    /* Dark Mode Background Colors (for explicit dark sections) */
    --bg-dark-primary: #343a40;
    --bg-dark-secondary: #495057;
    --bg-dark-tertiary: #5a6268;
}

/* ============================================
   DARK MODE THEME (Manual Toggle)
   ============================================ */
body.dark-mode {
    /* Brand Colors - Adjusted for dark mode */
    --brand-accent-orange: #F9C08D; /* Override brand accent for dark mode */
    --brand-accent-orange-light: #FFD4A3; /* Lighter variant for dark mode hover */
    --brand-accent-orange-dark: #E8A870; /* Darker variant for dark mode active */

    /* Background Colors */
    --bg-primary: #402A10; /* Deep, desaturated burnt orange */
    --bg-secondary: var(--brand-primary-dark); /* Dark Navy for sections/cards */

    /* Text Colors */
    --text-color: var(--brand-white);
    --text-color-light: #cccccc; /* Slightly darker light text */

    /* Header */
    --header-bg: var(--brand-primary-dark);
    --header-text: var(--brand-white);

    /* Buttons */
    --button-bg: #F9C08D; /* Lighter brown/orange for dark mode buttons */
    --button-hover-bg: #E8A870; /* Slightly darker on hover */
    --button-shadow: rgba(0,0,0,0.3);

    /* Forms & Inputs */
    --input-border: #444;
    --input-focus-shadow: rgba(90, 125, 155, 0.3);

    /* Code Blocks */
    --code-bg: #2a2a4a;
    --code-text: #e0e0e0;

    /* Borders & Shadows */
    --border-color: rgba(255,255,255,0.15);
    --shadow-light: rgba(0,0,0,0.3);
    --shadow-medium: rgba(0,0,0,0.4);

    /* Footer */
    --footer-bg: var(--brand-primary-dark); /* Dark blue for footer top row */
    --footer-text: var(--brand-white); /* White text for footer */
    --footer-copyright-bg: var(--bg-primary); /* Match primary background */
    --footer-copyright-text: #F9C08D; /* Lighter brown for copyright */

    /* Links */
    --link-color: #F9C08D; /* User requested color for links in dark mode */
    --link-hover-color: var(--brand-white); /* White on hover in dark mode */

    /* Additional Dark Mode UI Colors */
    --bg-hover: #2a3d5e; /* Dark blue hover state for dark mode */
    --text-muted: #a0a0a0; /* Lighter muted text for dark mode */
    --primary-color: var(--brand-accent-orange); /* Use the light orange */
    
    /* Card backgrounds for dark mode */
    --card-bg: var(--brand-white);
    --card-bg-hover: #f0f2f5;
    
    /* Input styling for dark mode - WHITE background, BLACK text */
    --input-bg: var(--brand-white);
    --input-text: var(--brand-primary-dark);
    
    /* Table styling for dark mode */
    --table-header-bg: var(--brand-primary-dark);
    --table-header-text: var(--brand-white);
    --table-row-hover-bg: #f0f4f8;
    
    /* Modal styling for dark mode */
    --modal-bg: var(--brand-white);
    --modal-text: var(--brand-primary-dark);
    --modal-border: rgba(28, 43, 76, 0.1);
    --modal-header-bg: var(--brand-white);
    --modal-footer-bg: var(--brand-white);
    
    /* Button styling for dark mode */
    --button-primary-bg: var(--brand-accent-orange);
    --button-primary-text: var(--brand-primary-dark);
    --button-secondary-bg: rgba(255, 255, 255, 0.1);
    --button-secondary-text: var(--brand-white);
    --button-secondary-border: rgba(255, 255, 255, 0.2);
}

/* ============================================
   SPACING SCALE
   ============================================ */
:root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
}

/* ============================================
   BORDER RADIUS SCALE
   ============================================ */
:root {
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
}

/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */
:root {
    --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 */
}

/* ============================================
   Z-INDEX SCALE
   ============================================ */
:root {
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal-backdrop: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
    --z-toast: 2000;
}