/* ============================================================
   Foundations · Web Landing — Design Tokens
   Edit Primitives to change brand identity globally.
   ============================================================ */

:root {
    /* Primitives */
    --color-brand-primary: #7A8B6E;
    --color-brand-accent: #5C6B52;

    /* Semantic */
    --color-action-primary: var(--color-brand-primary);
    --color-action-primary-hover: var(--color-brand-accent);
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #6B7280;
    --color-text-inverse: #FFFFFF;
    --color-bg-page: #FFFFFF;
    --color-bg-hero-overlay: rgba(0, 0, 0, 0.22);
    --hero-overlay-opacity: 0.22;
    --color-border-light: rgba(255, 255, 255, 0.55);
    --color-border-dark: #E5E7EB;
    --color-input-placeholder: rgba(255, 255, 255, 0.45);
    --color-bg-form-section: #F5F3EE;
    --color-bg-mobile-hero: var(--color-brand-primary);
    --color-render-bg: #3E4E45;
    --color-form-mobile-label: #7E8D7C;
    --color-form-mobile-text: #1A1A1A;
    --color-form-mobile-border: rgba(126, 141, 124, 0.35);
    --color-form-mobile-placeholder: rgba(126, 141, 124, 0.55);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Typography — Desktop defaults */
    --font-family: 'Outfit', sans-serif;
    --font-display: 64px;
    --font-display-lh: 68px;
    --font-h1: 48px;
    --font-h1-lh: 54px;
    --font-h2: 36px;
    --font-h2-lh: 43px;
    --font-h3: 28px;
    --font-h3-lh: 34px;
    --font-body-lg: 18px;
    --font-body-lg-lh: 28px;
    --font-body: 16px;
    --font-body-lh: 24px;
    --font-small: 14px;
    --font-small-lh: 20px;
    --font-label: 14px;
    --font-label-lh: 20px;
    --font-button: 15px;
    --font-button-lh: 20px;

    /* Layout */
    --header-height: 72px;
    --footer-height: 56px;
    --container-max: 1280px;
}

/* Mobile typography */
@media (max-width: 767.98px) {
    :root {
        --font-display: 42px;
        --font-display-lh: 46px;
        --font-h1: 32px;
        --font-h1-lh: 36px;
        --font-h2: 28px;
        --font-h2-lh: 34px;
        --header-height: 56px;
    }
}