/* ========================================
   Design Tokens & CSS Variables
   ======================================== */
:root {
    /* Colors */
    --navy: #1a3a5c;
    --navy-dark: #0f2640;
    --navy-light: #eef3f8;
    --gold: #f5a623;
    --gold-dark: #e8940a;
    --gold-light: #fff8e8;
    --border: #d5dde5;
    --border-light: #e6ecf3;
    --danger: #e63946;
    --danger-bg: #fdecea;
    --success: #2f8a4b;
    --success-bg: #e2f5e8;
    --warning: #8a6d00;
    --warning-bg: #fff6e0;
    --info: #1a5a9c;
    --info-bg: #e6f0fb;
    --text: #1a1a1a;
    --text-secondary: #4a5c70;
    --muted: #667;
    --bg: #f0f4f9;
    --bg-alt: #e9eef5;
    --card-bg: #ffffff;
    --overlay: rgba(10, 20, 35, 0.45);

    /* Gradients */
    --gradient-navy: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, #24507f 100%);
    --gradient-gold: linear-gradient(135deg, var(--gold), var(--gold-dark));
    --gradient-login-bg: radial-gradient(ellipse 90% 55% at 85% -10%, rgba(255,200,61,.22), transparent 60%),
                         radial-gradient(ellipse 70% 60% at 10% 110%, rgba(38,84,138,.5), transparent 65%),
                         linear-gradient(160deg, #0e1f36, #16304f 55%, #1c3a5e);

    /* Typography */
    --font-family: 'Cairo', sans-serif;
    --font-size-xs: 0.72rem;
    --font-size-sm: 0.82rem;
    --font-size-base: 0.9rem;
    --font-size-md: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.4rem;
    --font-size-3xl: 1.6rem;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 28px;

    /* Borders */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(18, 41, 67, 0.07);
    --shadow-md: 0 4px 16px rgba(18, 41, 67, 0.12);
    --shadow-lg: 0 8px 28px rgba(18, 41, 67, 0.18);
    --shadow-xl: 0 16px 48px rgba(16, 30, 46, 0.3);
    --shadow-gold: 0 6px 18px rgba(245, 166, 35, 0.4);

    /* Transitions */
    --transition-fast: 0.12s ease;
    --transition-base: 0.15s ease;
    --transition-slow: 0.25s ease;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1300;
    --z-toast: 1500;
    --z-loading: 9999;
}