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

:root {

    /* COLORS */

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

    --color-gold: #D8B14B;
    --color-gold-hover: #E6C768;
    /* Deeper, low-key gold — the base --color-gold reads fine on the
       navy background it was designed for, but falls to ~2:1 contrast
       against white. Used only where gold accents sit on a light/white
       surface, e.g. the light-mode navbar. */
    --color-gold-deep: #B8862B;

    --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;

    /* Rendered height of the floating pill <header> — every page's hero
       uses this to pull itself up behind the sticky header (margin-top)
       while padding its own content back down by the same amount
       (padding-top), so the hero's background extends behind the pill
       instead of showing flat body background around it, without
       shifting where the hero's actual content sits. Overridden for the
       mobile header height in css/homepage.css's own breakpoint. */
    --header-h: 64px;

    /* 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;
}