:root {
    /* Layout */
    --max-width: 1280px;
    --gutter: clamp(16px, 3vw, 28px);
    --header-min-height: 78px;
    --drupal-displace-offset-top: 0px;

    /* Colors */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f1f7f3;
    --surface-3: #eaf3ed;
    --text: #10231a;
    --muted: #5b7065;
    --primary: #2a8a52;
    --primary-strong: #206e41;
    --primary-weak: #e7f5eb;
    --border: rgba(16, 35, 26, 0.1);
    --border-strong: rgba(16, 35, 26, 0.16);

    /* Typography */
    --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --fs-0: 14px;
    --fs-1: 16px;
    --fs-2: clamp(1.1rem, 1.2vw, 1.28rem);
    --fs-3: clamp(1.35rem, 1.8vw, 1.85rem);
    --fs-4: clamp(1.9rem, 2.8vw, 2.5rem);
    --lh: 1.65;

    /* Shape + effects */
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.07);

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 28px;
    --sp-7: 40px;
}