/* ============================================================
   TOKENS — Terex Residence Design System
   Source: Figma 6h3TZcEzqFzZEAnI30RC6S · node 159:642 · 1440px frame
   ============================================================ */
:root {
    /* ── Fonts ── */
    --font-display: 'Montserrat', sans-serif;
    --font-ui: 'Poppins', sans-serif;

    /* ── Brand Colors ── */
    --c-primary-start: #C4161C;
    --c-primary-end: #F05123;
    --c-text-dark: #242527;
    --c-text-body: #1C1B17;
    --c-text-white: #FFFFFF;
    --c-bg-light: rgba(246, 246, 246, 0.8);
    --c-border: #1C1B17;
    --c-input-bg: rgba(255, 255, 255, 0.6);
    --c-footer-dark: #1C1B17;
    --c-footer-mid: #888888;

    /* ── Gradients ── */
    --g-primary: linear-gradient(0deg, #C4161C 0%, #F05123 100%);
    --g-cta: linear-gradient(180deg, rgba(178, 144, 83, .2) 0%, rgba(124, 108, 59, .2) 100%),
    linear-gradient(0deg, #C4161C 0%, #F05123 100%);
    --g-footer: linear-gradient(0deg, #888888 10.881%, #1C1B17 100%);

    /* ── Shadows ── */
    --sh-card: 15px 20px 26.8px 0px rgba(0, 0, 0, 0.25);
    --sh-cta: 3px 5px 20px 0px rgba(0, 0, 0, 0.31);
    --sh-nav: 0px 10px 15px 0px rgba(151, 151, 151, 0.12);
    --sh-form: 0px 10px 15px 0px rgba(28, 27, 23, 0.2);

    /* ── Border Radius ── */
    --r-input: 5px;
    --r-btn: 0px;

    /* ── Spacing ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 14px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 64px;
    --sp-10: 80px;

    /* ── Layout ── */
    --container-max: 1440px;
    --container-pad: 78px;
    --section-gap: 80px;
    --accent-bar-w: 90px;
    --accent-bar-h: 9px;
}

/* ── Responsive layout token overrides ── */
@media (max-width: 1200px) {
    :root {
        --container-pad: 56px;
    }
}

@media (max-width: 1024px) {
    :root {
        --container-pad: 48px;
        --section-gap: 64px;
    }
}

@media (max-width: 768px) {
    :root {
        --container-pad: 36px;
        --section-gap: 48px;
    }
}

@media (max-width: 480px) {
    :root {
        --container-pad: 36px;
        --section-gap: 40px;
    }
}