:root {
    --color-brand-900: #074833;
    --color-ink: #162c2a;
    --color-sage-500: #668466;
    --color-action: #5e7a60;
    --color-action-hover: #4f6c53;
    --color-violet-500: #a186bc;
    --color-violet-text: #76598e;
    --color-background: #fcfaf9;
    --color-blush: #f5efef;
    --color-surface-warm: #ebe3df;
    --color-border: #ded8d4;
    --color-gold: #c8985d;
    --color-white: #ffffff;
    --color-muted: #65716d;

    --font-display: Georgia, "Times New Roman", serif;
    --font-utility: system-ui, -apple-system, "Segoe UI", sans-serif;

    --content-max: 80rem;
    --page-gutter: clamp(1.125rem, 4vw, 3rem);

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

    --radius-control: 0.5rem;
    --radius-image: 0.75rem;
    --radius-panel: 1.125rem;
    --radius-round: 50%;

    --type-hero: clamp(2.55rem, 8.5vw, 4.1rem);
    --type-section: clamp(2rem, 5.5vw, 3rem);
    --type-card: clamp(1.45rem, 3vw, 2rem);
    --type-body: clamp(0.96rem, 1.2vw, 1.05rem);

    --line-display: 1.08;
    --line-body: 1.65;

    --focus-ring: 0 0 0 0.2rem var(--color-background), 0 0 0 0.4rem var(--color-violet-text);

    /* Documented breakpoint references; custom properties cannot be used in media query conditions. */
    --breakpoint-tablet: 40rem;
    --breakpoint-desktop: 60rem;
    --breakpoint-wide: 80rem;
}