:root {
    /* ==========================================================
       BRAND
       ========================================================== */

    --brand-primary: #0057B8;
    --brand-primary-rgb: 0, 87, 184;
    --brand-secondary: #E30813;
    --brand-secondary-rgb: 227, 8, 19;
    /* ==========================================================
       SURFACE
       ========================================================== */

    --surface-default: #FFFFFF;
    --surface-muted: #E5E5E5;
    --surface-dark: #111111;
    --surface-dark-alt: #1A1A1A;
    /* ==========================================================
       TEXT
       ========================================================== */

    --text-primary: #111111;
    --text-secondary: #333333;
    --text-on-brand: #FFFFFF;
    /* ==========================================================
       STATUS
       ========================================================== */

    --success: #16A34A;
    --success-bg: #E7F6EC;
    --warning: #D97706;
    --warning-bg: #FFF4E0;
    --danger: #DC2626;
    --danger-bg: #FCE8E8;
    --info: #0284C7;
    --info-bg: #E6F2FB;
    --accent-gold: #C9A227;
    --accent-gold-rgb: 201, 162, 39;
    /* ==========================================================
       BORDER
       ========================================================== */

    --border-color: #E5E5E5;
    /* ==========================================================
       SPACING (8px Grid)
       ========================================================== */

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;
    /* ==========================================================
       BORDER RADIUS
       ========================================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    /* ==========================================================
       SHADOWS
       ========================================================== */

    --shadow-sm: 0 1px 3px rgb(0 0 0 / 8%);
    --shadow-md: 0 6px 18px rgb(0 0 0 / 10%);
    --shadow-lg: 0 15px 40px rgb(0 0 0 / 15%);
    /* ==========================================================
       ANIMATION
       ========================================================== */

    --transition-fast: .15s ease;
    --transition-normal: .25s ease;
    --transition-slow: .35s ease;
    /* ==========================================================
       LAYOUT
       ========================================================== */

    --container-width: 1280px;
    --navbar-height: 80px;
}