:root {
    /* Brand palette */
    --cream: #FAF5EB;
    --cream-2: #F1E9D8;
    --forest: #153024;
    --leaf: #22493A;
    --moss: #52715F;
    --orange: #E87B2C;
    --orange-deep: #C05A17;
    --sand: #E4D9C2;
    --ink: #1E2B24;
    --text: #6B746E;

    /* Semantic aliases */
    --bg: #FFFFFF;
    --bg-alt: var(--cream-2);
    --surface: #FFFFFF;
    --border: var(--sand);
    --heading: var(--ink);
    --brand: var(--leaf);
    --brand-dark: var(--forest);
    --accent: var(--orange);
    --accent-dark: var(--orange-deep);

    /* Typography: Outfit is the site's one and only typeface (headings and
       body alike) so the whole site reads as one voice. */
    --font-display: "Outfit", "Segoe UI", Arial, sans-serif;
    --font-body: "Outfit", "Segoe UI", Arial, sans-serif;

    --fs-display: clamp(2.6rem, 6.5vw, 4.75rem);
    --fs-h1: clamp(1.95rem, 4vw, 3rem);
    /* One title scale for the whole site: every page and section title uses
       these, so all pages read as one voice. */
    --fs-h2: clamp(1.45rem, 2.3vw, 1.85rem);
    --fs-h3: clamp(1.1rem, 1.6vw, 1.3rem);
    --fs-h4: 1.1rem;
    --fs-body: 1rem;
    --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
    --fs-small: 0.85rem;
    --fs-xs: 0.75rem;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Radii & shadows */
    --radius-sm: 0;
    --radius: 0;
    --radius-lg: 0;
    --radius-pill: 0;
    --shadow-sm: 0 2px 8px rgba(21, 48, 36, 0.08);
    --shadow: 0 10px 30px rgba(21, 48, 36, 0.12);
    --shadow-lg: 0 24px 60px rgba(21, 48, 36, 0.18);

    /* Layout */
    --container: 1200px;
    --container-narrow: 860px;
    --header-h: 134px;
    --gutter: clamp(1rem, 4vw, 2rem);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.3s;
}