:root {

    /* =========================
       COLORS
    ========================== */
    --background:#070A0D;

    --surface:#10161D;

    --surface-light:#18232C;

    --text:#F7F8FA;

    --text-secondary:#A6B2BE;

    --accent:#57D5E6;

    --accent-light:#84E8F3;

    --gold:#C9A458;

    --border:#20313D;

    /* =========================
       SPACING
    ========================= */

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 2.25rem;
    --space-xl: 4rem;
    --space-2xl: 8rem;
    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 32px;

    /* =========================
       TYPOGRAPHY
    ========================== */

    --heading-font: "Space Grotesk", sans-serif;
    --body-font: "Inter", sans-serif;

    /* =========================
       LAYOUT
    ========================== */

    --content-width: 1200px;

    --section-padding: 120px;

    --navbar-height: 80px;
    --navbar-padding: 1.5rem;

    /* =========================
       BORDER RADIUS
    ========================== */

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 32px;

    /* =========================
       TRANSITIONS
    ========================== */

    --transition-fast: .2s ease;
    --transition: .35s ease;
    --transition-slow: .6s ease;

    /* =========================
        NAVIGATION
    ========================= */

    --navbar-height: 72px;
    --navbar-padding: 1.5rem;
    
    /* =========================
        SHADOWS
    ========================= */

    --shadow-sm: 0 4px 16px rgba(0,0,0,.15);

    --shadow-md: 0 10px 30px rgba(0,0,0,.25);

    --shadow-lg: 0 20px 60px rgba(0,0,0,.35);
}