:root {
    /* ===== PRIMARY COLORS (Inspired by Reference Site) ===== */
    --primary-navy: #021b33; /* Sidebar / Navbar */
    --primary-blue: #2563eb; /* Primary actions */
    --primary-dark: #020f1f; /* Deep header navy */
    /* ===== ACCENT COLORS (Warm Accent) ===== */
    --accent-gold: #f59e0b; /* Main accent (buttons / active) */
    --accent-gold-light: #fbbf24;
    --accent-gold-dark: #d97706;
    --accent-bronze: #eab308;
    /* ===== NEUTRAL COLORS (Clean Modern Backgrounds) ===== */
    --bg-white: #ffffff;
    --bg-cream: #f4f6f9; /* App background (slightly warmer) */
    --bg-beige: #e6e9ef;
    --bg-light-beige: #fafbfc;
    --bg-warm: #eef2ff;
    /* ===== TEXT COLORS ===== */
    --text-primary: #0f172a; /* Headings */
    --text-secondary: #334155; /* Normal text */
    --text-muted: #94a3b8;
    --text-light: #e5e7eb;
    --text-dark: #020617;
    /* ===== BORDER & DIVIDER COLORS ===== */
    --border-light: #e5e7eb;
    --border-medium: #cbd5e1;
    --border-dark: #94a3b8;
    /* ===== STATUS COLORS ===== */
    --success: #16a34a;
    --success-light: #dcfce7;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --error: #dc2626;
    --error-light: #fee2e2;
    --info: #2563eb;
    --info-light: #dbeafe;
    /* ===== SHADOWS (Soft & Modern) ===== */
    --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
    --shadow-md: 0 6px 12px rgba(2, 6, 23, 0.10);
    --shadow-lg: 0 14px 28px rgba(2, 6, 23, 0.14);
    --shadow-xl: 0 25px 50px rgba(2, 6, 23, 0.18);
    --shadow-gold: 0 10px 25px rgba(245, 158, 11, 0.35);
    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient( 135deg, var(--primary-navy) 0%, #042a4d 100% );
    --gradient-gold: linear-gradient( 135deg, var(--accent-gold-dark) 0%, var(--accent-gold-light) 100% );
    --gradient-warm: linear-gradient( 180deg, var(--bg-light-beige) 0%, var(--bg-white) 100% );
    /* ===== SPACING SCALE ===== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    /* ===== TYPOGRAPHY ===== */
    --font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    /* ===== LAYOUT ===== */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --navbar-height: 70px;
    --container-max-width: 1280px;
    /* ===== 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;
}