/* ========== CSS VARIABLES - COLOR THEME & TYPOGRAPHY ========== */

:root {
    /* Military Color Palette */
    --primary-color: #2B411C;          /* Dark Army Green */
    --secondary-color: #ff9933;        /* Saffron Orange */
    --accent-color: #2B411C;           /* Dark Army Green */
    --accent-light: #5B7742;           /* Medium Army Green */
    --success-color: #4C5D34;          /* Army Green */
    --army-light: #A4AA88;             /* Light Army Green */
    
    /* Background & Surfaces */
    --bg-light: #f5f5f5;               /* Light Cream */
    --bg-white: #ffffff;               /* Pure White */
    --bg-dark: #0f1419;                /* Dark Background */
    --bg-secondary: #2B411C;           /* Secondary Dark */
    
    /* Dark Mode Colors */
    --dark-bg-primary: #0a0f0a;        /* Very Dark Green */
    --dark-bg-secondary: #1a2416;      /* Dark Army Green */
    --dark-accent: #ff9933;            /* Saffron Orange */
    --dark-accent-light: #ffa84d;      /* Light Orange */
    --dark-text: #e8e8e8;              /* Light Text */
    --dark-text-secondary: #b0b0a8;    /* Light Grey */
    
    /* Text Colors */
    --text-dark: #2B411C;              /* Dark Army Green */
    --text-light: #5a6c7d;             /* Light Grey */
    --text-muted: #8b95a5;             /* Muted Text */
    --text-white: #ffffff;             /* White Text */
    
    /* Border & Shadow */
    --border-color: #e0e0e0;           /* Light Border */
    --border-dark: #5B7742;            /* Dark Border */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* Typography */
    --font-serif: 'Roboto', sans-serif;       /* Headings */
    --font-sans: 'Roboto', sans-serif;        /* Body */
    --font-size-base: 15px;
    --font-size-small: 13px;
    --font-size-large: 17px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;
    --font-size-3xl: 40px;
    
    /* Line Heights */
    --line-height-tight: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    
    /* Spacing - Compact Layout */
    --space-xs: 3px;
    --space-sm: 6px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    
    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* Z-Index Stack */
    --z-dropdown: 1000;
    --z-modal: 2000;
    --z-navbar: 100;
    --z-tooltip: 500;
}

/* Dark Mode Variables */
body.dark-mode {
    /* Indian Army Green Theme */
    --bg-light: #0a0f0a;               /* Very Dark Green */
    --bg-white: #1a2416;               /* Dark Army Green */
    --bg-secondary: #2B411C;           /* Dark Army Green */
    
    /* Text Colors */
    --text-dark: #e8e8e8;              /* Light Text */
    --text-light: #b0b0a8;             /* Light Grey */
    --text-muted: #a4aa88;             /* Army Light Green */
    
    /* Accents - Saffron Orange */
    --secondary-color: #ff9933;        /* Indian Saffron */
    --accent-color: #ff9933;           /* Saffron Orange */
    --accent-light: #ffa84d;           /* Light Orange */
    
    /* Borders */
    --border-color: #5B7742;           /* Army Green Border */
}