/* ==========================================
   RANK YOUR BIZ DESIGN SYSTEM
   ========================================== */

:root {

    /* COLORS */

    --color-background: #08152D;
    --color-background-alt: #101E39;

    --color-gold: #D8B14B;
    --color-gold-hover: #E6C768;

    --color-white: #FFFFFF;
    --color-text: #C9D1DC;

    --color-card: #112040;

    /* TYPOGRAPHY */

    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Inter", sans-serif;

    /* FONT SIZES */

    --fs-xs: .875rem;
    --fs-sm: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.5rem;
    --fs-xl: 2rem;
    --fs-2xl: 3rem;
    --fs-3xl: 4.5rem;

    /* SPACING */

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    /* xl/2xl/3xl scale fluidly with viewport width instead of jumping
       at a single breakpoint — a fixed cutoff left in-between widths
       (foldables, small tablets) stuck with full desktop spacing,
       which stacks up into large empty gaps between sections that
       share a background. Each clamps between a mobile floor and the
       original desktop value (reached at 1600px+). */
    --space-xl: clamp(2.5rem, 2rem + 2vw, 4rem);
    --space-2xl: clamp(3.5rem, 2.7rem + 3.3vw, 6rem);
    --space-3xl: clamp(4.5rem, 3.3rem + 4.7vw, 8rem);

    /* CONTAINER */

    --container-width: 1800px;

    /* BORDER */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* SHADOW */

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

    /* TRANSITIONS */

    --transition:
        .3s ease;
}