:root {
    --layout-max-width: 1200px;

    --color-bg: #f3f1ed;
    --color-surface: #fcfbf9;
    --color-surface-alt: #f8f6f3;
    --color-text: #24333a;
    --color-muted: #5f686d;

    --color-border: #d8d4cc;
    --color-border-strong: #c9c2b6;

    --color-primary: #0f766e;
    --color-primary-hover: #0c615b;
    --color-primary-contrast: #ffffff;

    --color-focus-ring: rgba(15, 118, 110, 0.28);
    --focus-ring-width: 3px;

    --color-info-bg: #e8f5f3;
    --color-info-border: #b9ddd8;
    --color-info-text: #1f5f59;

    --color-success-bg: #e8f4ed;
    --color-success-border: #beddcd;
    --color-success-text: #285843;

    --color-warning-bg: #f4efe6;
    --color-warning-border: #d9ccb5;
    --color-warning-text: #6e5b3a;

    --color-danger-bg: #f9eceb;
    --color-danger-border: #e7c7c4;
    --color-danger-text: #7a343d;

    --color-overlay: rgba(12, 37, 34, 0.58);

    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 14px rgba(17, 24, 39, 0.06);
    --shadow-md: 0 8px 28px rgba(17, 24, 39, 0.22);

    --font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-caption: 0.875rem;
    --font-size-body: 1rem;
    --font-size-lead: 1.125rem;
    --font-size-h3: 1.125rem;
    --font-size-h2: 1.5rem;
    --font-size-h1: clamp(1.8rem, 3vw, 2.4rem);
    --line-height-body: 1.6;
    --line-height-heading: 1.25;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;

    --color-header-bg: #194a46;
    --color-header-border: #225a55;
    --color-header-brand: #f3faf8;
    --color-header-link: #d9e8e6;
    --color-header-link-hover: #f3faf8;
    --color-header-link-hover-bg: rgba(15, 118, 110, 0.16);
    --color-header-link-active: #d8f3ef;
    --color-header-link-active-bg: rgba(15, 118, 110, 0.2);
    --color-header-link-active-border: #2a6b66;
    --color-header-toggle-bg: #194a46;
    --color-header-toggle-border: #2a6b66;

    --color-footer-bg: #fcfbf9;
    --color-footer-text: #5f686d;
    --color-footer-link: #0f766e;

    --color-brand-mark-top: #7acfc6;
    --color-brand-mark-bottom: #cfc2ae;

    --color-field-bg: #f8f6f3;
}