:root {
    /* --------------------------------------------------------------
       Brand
       -------------------------------------------------------------- */

    --color-olive-900: #18382D;
    --color-olive-800: #193C30;
    --color-olive-700: #214638;
    --color-olive-600: #315A49;
    --color-olive-500: #547463;
    --color-olive-200: #DDE8DE;
    --color-olive-100: #EAF0E7;

    --color-beige-500: #D8E88A;
    --color-beige-300: #E5E8CE;
    --color-beige-200: #EDECDD;
    --color-beige-100: #F5F1E7;

    --color-wood-700: #8F4935;
    --color-wood-500: #B96B50;

    --color-black: #1C2923;
    --color-white: #ffffff;


    /* --------------------------------------------------------------
       Semantic colors
       -------------------------------------------------------------- */

    --color-primary: #214638;
    --color-primary-hover: #193C30;
    --color-primary-soft: #EAF0E7;

    --color-background: #F5F1E7;
    --color-brand-lime: #D8E88A;
    --color-brand-terracotta: #B96B50;
    --color-brand-terracotta-text: #8F4935;
    --color-surface: var(--color-white);
    --color-surface-soft: var(--color-beige-100);

    --color-text: var(--color-black);
    --color-text-muted: #58675F;
    --color-text-inverse: var(--color-white);

    --color-border: #D9DDD4;
    --color-border-strong: #BAC7BB;

    --color-success: #214638;
    --color-warning: #8F4935;
    --color-danger: #8F4935;


    /* --------------------------------------------------------------
       Typography
       -------------------------------------------------------------- */

    --font-family-base:
        "DM Sans",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --font-family-display:
        "DM Serif Display",
        Georgia,
        Arial,
        sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 3rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.15;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;


    /* --------------------------------------------------------------
       Spacing
       -------------------------------------------------------------- */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;


    /* --------------------------------------------------------------
       Radius
       -------------------------------------------------------------- */

    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;


    /* --------------------------------------------------------------
       Shadows
       -------------------------------------------------------------- */

    --shadow-sm:
        0 1px 2px rgb(23 25 22 / 6%);

    --shadow-md:
        0 8px 24px rgb(23 25 22 / 8%);

    --shadow-lg:
        0 18px 50px rgb(23 25 22 / 12%);


    /* --------------------------------------------------------------
       Layout
       -------------------------------------------------------------- */

    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-xl: 1360px;

    --page-gutter: clamp(20px, 4vw, 48px);

    /* --------------------------------------------------------------
       Motion
       -------------------------------------------------------------- */

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}