/* Kenmore Group website – design tokens
   Source: KEN_Website_Comps (InDesign, 1190.55 pt artboard ≈ 1440 px), corrected for web.
   In Webflow: recreate as Variables (Colors / Typography / Spacing), same names. */

/* Fonts are enqueued by the plugin (Assets::FONTS) with preconnect hints. */

:root {
  /* ---- Colour ---- */
  --ken-red:        #ED1C24;  /* Brand red. Fills, big display type (≥ 24 px bold), rules. */
  --ken-red-text:   #C8102E;  /* Small red text on light backgrounds (eyebrows, active nav). 5.3:1 on cream. */
  --ken-red-dark:   #B5121B;  /* Hover/pressed state for red buttons and tiles. */
  --ken-ink:        #131517;  /* Headlines, dark sections, footer. */
  --ken-ink-2:      #1C1F22;  /* Card surface on dark sections. */
  --ken-body:       #3A3D40;  /* Body text on light backgrounds. */
  --ken-muted:      #6B6F73;  /* Captions, meta. 5.1:1 on white, 4.6:1 on cream. */
  --ken-line:       #D9D7D1;  /* Hairlines and table rules on light. */
  --ken-line-dark:  #2E3236;  /* Hairlines on dark. */
  --ken-cream:      #F4F4F1;  /* Default light section background. */
  --ken-cream-2:    #EDECE8;  /* Alternate light section (group navigator, footprint). */
  --ken-white:      #FFFFFF;

  /* ---- Type families ---- */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;  /* ALWAYS uppercase; 700 headlines, 600 statements (per comps) */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Type scale (fluid 375 → 1440 px) ---- */
  --fs-display-xl: clamp(3.25rem, 1.6rem + 6.6vw, 7rem);   /* Home hero 52 → 112 (comp 91.7 pt) */
  --fs-display-l:  clamp(2.75rem, 1.7rem + 4.4vw, 5.5rem); /* Division hero, contact headline 44 → 88 */
  --fs-display-m:  clamp(2.25rem, 1.17rem + 4.6vw, 5.3rem);/* Section headlines 36 → 85 (comp 70 pt) */
  --fs-display-s:  clamp(1.75rem, 1.04rem + 3vw, 3.75rem); /* Closing statements, pull quote 28 → 60, SemiBold (comp 50 pt) */
  --fs-stat:       clamp(2.5rem, 1.8rem + 3vw, 4.25rem);   /* Stat values 40 → 68 (comp 56 pt) */
  --fs-stat-xl:    clamp(3rem, 1.3rem + 5.6vw, 6rem);      /* "Why Kenmore" stats 48 → 96 (comp 80 pt) */
  --fs-h3:         clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); /* Body section headings 24 → 36 (comp 30 pt) */
  --fs-lead:       1.1875rem;  /* 19 px */
  --fs-body:       1.0625rem;  /* 17 px – comps were 12–13 px equivalent; too small for web */
  --fs-small:      0.875rem;   /* 14 px – captions, footer */
  --fs-eyebrow:    0.8125rem;  /* 13 px, Inter Regular, uppercase, tracking below (comp 10 pt) */
  --fs-stat-label: 1.1875rem;  /* 19 px bold minimum on red (WCAG large-text rule) */

  --lh-display: 0.92;
  --lh-tight:   1.1;
  --lh-body:    1.6;
  --tracking-display: -0.02em;  /* comp: -20 tracking on every Barlow setting */
  --tracking-eyebrow: 0.2em;    /* comp: +200 tracking; replaces typed spaces */

  /* ---- Spacing (8 px base) ---- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem;  --sp-7: 3rem;  --sp-8: 4rem;   --sp-9: 6rem;  --sp-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --container: max(1200px, min(1640px, 84vw)); /* comps: content spans ~84% of wide screens (≈1610 px at 1920); 1200 px below ~1430 px */
  --container-narrow: 760px;    /* division body text column */
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --header-h: 72px;
  --radius: 0;                  /* square corners everywhere. No exceptions. */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 150ms;
  --dur-med:  400ms;
  --dur-slow: 800ms;
  --parallax-hero: 0.35;        /* hero image moves at 35% of scroll speed */
  --parallax-media: 0.12;       /* section images drift 12% */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; --parallax-hero: 0; --parallax-media: 0; }
}