/* ==========================================================================
   M2 Mechanical — Design tokens
   Industrial HVAC/R, New England. Distinct from ClimaCore parent brand.

   Note: CSS variable names retain the `--cc-*` prefix as a tech-debt holdover
   from the initial M2 fork; values are M2-specific. Rename pass is deferred.
   ========================================================================== */

:root {
    /* ---------- Color (M2 industrial palette) ---------- */
    --cc-bg:             #FAF7F2;     /* warm cream — page foundation, distinguishes from ClimaCore's white */
    --cc-bg-card:        #FFFFFF;     /* white cards over the cream ground */
    --cc-bg-alt:         #EFF2F5;     /* cool gray — alternating sections */
    --cc-bg-inverse:     #1E2A30;     /* slate — footer + dark panels (matches ClimaCore) */
    --cc-text:           #1E2A30;     /* near-black */
    --cc-text-inverse:   #FFFFFF;
    --cc-text-muted:     #5A6975;
    --cc-text-muted-inv: #9DAAB6;     /* muted on dark grounds */
    --cc-border:         #DCE3EA;
    --cc-border-hover:   #1E2A30;
    --cc-accent:         #8B1E2D;     /* ClimaCore crimson — primary brand (matches M2 logo) */
    --cc-accent-hover:   #6E1722;
    --cc-warm:           #8B1E2D;     /* Brand crimson — secondary accent unified with primary */
    --cc-warm-hover:     #6E1722;
    --cc-link:           #8B1E2D;     /* same as accent for visual coherence */
    --cc-error:          #B71C1C;
    --cc-success:        #2E7D32;

    /* ---------- Shadows ---------- */
    --cc-shadow-sm: 0 2px 12px rgba(30, 42, 48, 0.06);
    --cc-shadow-md: 0 6px 24px rgba(30, 42, 48, 0.10);
    --cc-shadow-lg: 0 16px 48px rgba(30, 42, 48, 0.14);

    /* ---------- Spacing — 4px base ---------- */
    --cc-space-1:   4px;
    --cc-space-2:   8px;
    --cc-space-3:   12px;
    --cc-space-4:   16px;
    --cc-space-5:   20px;
    --cc-space-6:   24px;
    --cc-space-7:   28px;
    --cc-space-8:   32px;
    --cc-space-10:  40px;
    --cc-space-12:  48px;
    --cc-space-16:  64px;
    --cc-space-20:  80px;
    --cc-space-24:  96px;
    --cc-space-30:  120px;
    --cc-space-40:  160px;
    --cc-space-50:  200px;

    /* ---------- Layout ---------- */
    --cc-content-max:    1280px;
    --cc-content-narrow: 880px;
    --cc-prose-max:      680px;
    --cc-page-pad:       var(--cc-space-5);

    /* ---------- Radius ---------- */
    --cc-radius-0:    0;
    --cc-radius-sm:   2px;
    --cc-radius-btn:  4px;            /* squared CTAs — industrial vs ClimaCore's pill */
    --cc-radius-card: 6px;

    /* ---------- Typography ---------- */
    --cc-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
    --cc-font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --cc-font-mono:    'Open Sans', system-ui, -apple-system, sans-serif;

    --cc-fw-light:    300;
    --cc-fw-regular:  400;
    --cc-fw-medium:   500;
    --cc-fw-semibold: 600;
    --cc-fw-bold:     700;

    /* Type scale */
    --cc-fs-display-1: clamp(40px, 5vw + 16px, 76px);
    --cc-fs-display-2: clamp(32px, 3.5vw + 14px, 52px);
    --cc-fs-h1:        clamp(32px, 2.8vw + 14px, 44px);
    --cc-fs-h2:        clamp(26px, 2vw + 12px, 34px);
    --cc-fs-h3:        clamp(20px, 0.8vw + 16px, 24px);
    --cc-fs-eyebrow:   13px;
    --cc-fs-body-lg:   clamp(18px, 0.4vw + 16px, 20px);
    --cc-fs-body:      17px;
    --cc-fs-meta:      14px;
    --cc-fs-button:    15px;

    /* ---------- Motion ---------- */
    --cc-dur-fast:   180ms;
    --cc-dur-mid:    340ms;
    --cc-dur-slow:   600ms;
    --cc-ease-out:   cubic-bezier(0.2, 0.6, 0.2, 1);
    --cc-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Z-index ---------- */
    --cc-z-header:     100;
    --cc-z-anchor-nav:  90;
    --cc-z-overlay:    200;
    --cc-z-modal:      300;
}

/* Page padding scales with viewport — matches reference's compact gutter */
@media (min-width: 768px) {
    :root { --cc-page-pad: var(--cc-space-6); }
}
@media (min-width: 1024px) {
    :root { --cc-page-pad: var(--cc-space-6); }
}