/* ==========================================================================
   ClimaCore — Design tokens (rev 2)
   Single source: spec + Modigent-pattern adaptation 2026-05-05
   ========================================================================== */

:root {
    /* ---------- Color (rev 3 — strict logo palette + universal neutrals) ----------
       Logo Package authoritative colors:
         #8B1E2D crimson  — primary brand mark
         #7A8482 warm gray — "A CLIMACORE COMPANY" subtext
         #FFFFFF white     — reversed lockup ground
       Black / light-gray border are treated as universal neutrals (every brand
       uses these implicitly); no other invented hues. */
    --cc-bg:             #F7F8F8;     /* faint logo-warm-gray foundation — lets white cards lift */
    --cc-bg-card:        #FFFFFF;     /* white cards pop against the gray foundation */
    --cc-bg-alt:         #FFFFFF;     /* alt sections invert to pure white — breathing pause */
    --cc-bg-inverse:     #000000;     /* pure black — footer + CTA banner */
    --cc-text:           #000000;
    --cc-text-inverse:   #FFFFFF;
    --cc-text-muted:     #7A8482;     /* logo warm gray */
    --cc-text-muted-inv: #7A8482;     /* same — works against black ground */
    --cc-border:         #E5E5E5;     /* universal light gray hairline */
    --cc-border-hover:   #000000;
    --cc-accent:         #8B1E2D;     /* logo crimson */
    --cc-accent-hover:   #6E1722;
    --cc-link:           #8B1E2D;     /* link color = crimson (was placeholder blue) */
    --cc-error:          #B71C1C;
    --cc-success:        #2E7D32;

    /* ---------- Shadows ---------- */
    --cc-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08);
    --cc-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.12);
    --cc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* ---------- 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;       /* prose, FAQ, connect form */
    --cc-prose-max:      680px;
    --cc-page-pad:       var(--cc-space-5);   /* mobile 20px */

    /* ---------- Radius ---------- */
    --cc-radius-0:    0;
    --cc-radius-sm:   2px;
    --cc-radius-btn:  999px;     /* pill */
    --cc-radius-card: 8px;

    /* ---------- Typography (rev 3) ---------- */
    --cc-font-display: 'Roboto Slab', Georgia, 'Times New Roman', serif;
    --cc-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

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

    /* Type scale — clamp() so the same tokens scale across viewports. */
    --cc-fs-display-1: clamp(40px, 5vw + 16px, 80px);    /* Page band headlines, big home stat moments */
    --cc-fs-display-2: clamp(32px, 3.5vw + 14px, 56px);
    --cc-fs-h1:        clamp(32px, 2.8vw + 14px, 48px);
    --cc-fs-h2:        clamp(26px, 2vw + 12px, 36px);
    --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 */
@media (min-width: 768px) {
    :root { --cc-page-pad: var(--cc-space-10); }    /* 40px tablet */
}
@media (min-width: 1024px) {
    :root { --cc-page-pad: var(--cc-space-16); }    /* 64px desktop */
}