:root {
    /* Main backgrounds */
    --color-cream: #f4f1ec;
    --color-soft-green: #e6f0e1;
    --color-white: #ffffff;

    /* NoordgroeiT brand colours */
    --color-green: #3e6b47;
    --color-green-dark: #294d33;
    --color-green-light: #b7ceb1;

    /* Text */
    --color-text: #202622;
    --color-text-muted: #5f685f;

    /* Accents */
    --color-yellow: #e2c45f;
    --color-border: rgba(62, 107, 71, 0.18);

    /* Typography */
--font-body: "Manrope", Arial, sans-serif;
--font-heading: "Manrope", Arial, sans-serif;

/* Font sizes */
--font-xs: 0.78rem;
--font-sm: 0.875rem;
--font-base: 1rem;
--font-md: 1.05rem;
--font-lg: 1.18rem;

--font-xl: clamp(
    1.45rem,
    1.8vw,
    1.9rem
);

--font-2xl: clamp(
    2rem,
    3.2vw,
    3.25rem
);

--font-hero: clamp(
    2.8rem,
    4.8vw,
    4.8rem
);

    /* Content width */
    --container-width: 1240px;
    --container-narrow: 760px;
    --container-padding: clamp(1.25rem, 4vw, 3rem);

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;
    --space-section: clamp(5rem, 9vw, 8rem);

    /* Border radius */
    --radius-small: 0.75rem;
    --radius-medium: 1.25rem;
    --radius-large: 2rem;
    --radius-extra-large: 3rem;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-small:
        0 0.5rem 1.5rem rgba(41, 77, 51, 0.08);

    --shadow-medium:
        0 1rem 3rem rgba(41, 77, 51, 0.12);

    --shadow-large:
        0 2rem 5rem rgba(41, 77, 51, 0.16);

    /* Animation */
    --transition-fast: 180ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);
}