/* =====================================================================
   THE SKIN. This file is the single place to re-theme the public site:
   change these custom-property values (or ship an alternate theme.css /
   add a [data-theme="..."] block) and the whole site re-skins without
   touching markup or structure. Nothing else should hard-code colors,
   fonts, spacing, radii, or shadows — always reference these tokens.
   ===================================================================== */
:root {
    /* Brand / color */
    --color-bg: #f6f7f4;
    --color-surface: #ffffff;
    --color-surface-alt: #eef2ee;
    --color-text: #1d2420;
    --color-text-muted: #5d675f;
    --color-primary: #1b6b50;
    --color-primary-hover: #155740;
    --color-on-primary: #ffffff;
    --color-accent: #c4622d;
    --color-border: #e1e5e0;
    --color-focus: #2f8f6e;

    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size: 16px;
    --line-height: 1.55;
    --weight-normal: 400;
    --weight-medium: 600;
    --weight-bold: 700;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Shape & depth */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .05);

    /* Layout */
    --container-max: 1120px;
    --header-height: 64px;
}