/*
 * Misitu Milele design tokens. Source of truth: docs/DESIGN.md §10 (keep in sync).
 * Elementor Global Colours/Fonts mirror these values (DESIGN §10, Elementor Site Settings).
 */
:root {
    /* Apple green palette (user, 2026-10-08): every green on the site comes from this scale, with
     * 500 as the only primary. Semantic tokens below point at the steps, so they cannot drift. */
    --color-green-50: #F5FAF3;
    --color-green-100: #E7F5E3;
    --color-green-200: #D0EAC8;
    --color-green-300: #A9D99C;
    --color-green-400: #7BBF69;
    --color-green-500: #59A545;
    --color-green-600: #458534;
    --color-green-700: #386A2B;
    --color-green-800: #305427;
    --color-green-900: #284621;
    --color-green-950: #12250E;

    --color-brand-green: #59A545;
    --color-brand-dark: #231F20;
    --color-white: #FFFFFF;
    --color-green-text: var(--color-green-700);
    --color-surface: #F4F5F3;
    --color-border: #E4E6E1;
    --color-border-strong: #8A8587;
    --color-muted: #5A5658;
    --color-on-dark-muted: #BDB8B2;
    --color-error: #B3261E;
    /* v4 premium direction (DESIGN §0): soft green tint for panels and cards. Page panels use only
     * brand green 500 (user, 2026-10-09: no darker greens in pages), with dark text. */
    --color-tint: #EEF5EA;
    --color-tint-strong: #DCEBD5;

    --mm-font-display: "Outfit", Arial, sans-serif;
    --mm-font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;

    --mm-gutter: clamp(1rem, 4vw, 2.5rem);
    --mm-container: 90rem; /* PLAN D54: wider on big screens; = Elementor kit container width */
    --mm-container-wide: 90rem;
    --mm-container-article: 42.5rem;
    --mm-section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

    --mm-radius-sm: 12px;   /* inputs */
    --mm-radius-md: 16px;   /* images, small cards */
    --mm-radius-lg: 24px;   /* feature photos */
    --mm-radius-card: 20px;
    --mm-radius-panel: 32px;
    --mm-radius-pill: 999px; /* every button */
    --mm-shadow: 0 8px 24px rgb(35 31 32 / 0.08);
    --mm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --mm-z-header: 100;
    --mm-z-menu: 110;
    --mm-z-skip: 1000;
}