/* KZM Contractors design tokens (27 Oct 2026), taken from the shipped Van Door hero, kzm-v-b2.html. Custom properties only, every name --kzm-.
   The written system is ../Creative/kzm-design.md.
   Fonts (one link, DM Sans is only for the Mr Moodz pill):
   https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Caprasimo&family=DM+Sans:wght@400;500;600&display=swap
   Seasons: put data-season="winter" (heating) or "summer" (cooling) on any wrapper; the --kzm-season-* aliases below follow it. Winter is the default.
   Tokens marked (sheet) are not in the hero yet: they are the proposal for KZM's booking sheet. */
:root{
  /* van paint and panel */
  --kzm-forest:#1d3a29;          /* the duco, every dark ground */
  --kzm-forest-deep:#0f2318;     /* the painter's shade, deep shadows */
  --kzm-forest-raised:#27493a;   /* a raised panel on the duco */
  --kzm-cream:#f3e9d2;           /* text on the duco, the lower panel, the stripe pin */
  --kzm-cream-deep:#e7d8b4;
  --kzm-paper:#fbf7ee;           /* (sheet) light ground for sheets and forms, a step lighter than the cream panel */
  --kzm-white:#ffffff;           /* (sheet) controls on paper */
  --kzm-ink:#14211a;             /* text on mustard and on paper */
  --kzm-gasket:#0d130f;          /* the rubber seal round a window */

  /* sunset and ice */
  --kzm-mustard:#e4a834;         /* the main button, the ampersand, wide caps on the duco */
  --kzm-mustard-ledge:#a8761c;   /* the 3px ledge under the mustard button */
  --kzm-orange:#d9622b;          /* summer stripe, the heating shade, small marks */
  --kzm-rust:#c4531f;            /* the lit HEATING word, a stamp ink on paper */
  --kzm-ice:#e4efeb;             /* winter stripe pin */
  --kzm-mint:#9fcdc5;            /* winter stripe middle band */
  --kzm-teal:#4f97a3;            /* winter stripe bottom band, the cooling shade */
  --kzm-teal-deep:#2c7480;       /* the lit COOLING word, cool icons on paper */
  --kzm-grass:#d39a3c;           /* summer ground in the badge */

  /* text on the duco and on the cream panel (alpha steps, all pass AA at their sizes) */
  --kzm-on-forest:var(--kzm-cream);                 /* 10.3:1 */
  --kzm-on-forest-2:rgba(243,233,210,.82);          /* body copy, 7.5:1 */
  --kzm-on-forest-3:rgba(243,233,210,.7);           /* proof line, 5.9:1 */
  --kzm-on-cream:var(--kzm-forest);                 /* 10.3:1 */
  --kzm-on-cream-2:rgba(29,58,41,.8);               /* small wide caps on the cream panel */
  --kzm-line-forest:rgba(243,233,210,.24);          /* hairlines and plate edges on the duco */
  --kzm-line-paper:rgba(29,58,41,.14);              /* (sheet) hairlines on paper */

  /* brass, enamel, sun (gradients) */
  --kzm-brass:linear-gradient(135deg,#f4dfa2 0%,#b8893b 38%,#ecd28d 62%,#8a6526 100%);
  --kzm-enamel:radial-gradient(80% 80% at 38% 30%,#fbf5e6,#e6d6b0);
  --kzm-sun:linear-gradient(180deg,#ecb53d 0%,#e48a2e 55%,#d4572a 100%);
  --kzm-duco:radial-gradient(90% 55% at 22% 8%,rgba(255,255,255,.075),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.035) 0,transparent 38%,rgba(0,0,0,.16) 100%),var(--kzm-forest);
  --kzm-glare:radial-gradient(circle at 86% 0%,rgba(255,247,224,.95) 0,rgba(255,224,156,.5) 8%,rgba(255,184,92,.16) 26%,transparent 52%);
  --kzm-frost-haze:radial-gradient(ellipse 85% 80% at 50% 50%,rgba(228,239,242,0) 35%,rgba(228,239,242,.7) 100%);

  /* type */
  --kzm-display:'Caprasimo',Georgia,serif;          /* one weight, 400 */
  --kzm-sans:'Archivo',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --kzm-w-body:400; --kzm-w-medium:500; --kzm-w-bold:700; --kzm-w-black:800;
  --kzm-wide:125%;               /* font-stretch for wide caps */
  --kzm-wide-mid:112%;           /* long lists in caps */
  --kzm-caps-track:.2em;         /* wide caps letter-spacing, .12em for long lists, .28em for the CONTRACTORS line */
  --kzm-shade:.045em .05em 0;    /* the painter's shade offset, use as text-shadow: var(--kzm-shade) var(--kzm-forest-deep) */
  --kzm-shade-mark:.06em .07em 0;
  /* sizes: phone at 390, desktop at 1280 (the hero uses cqi clamps between them) */
  --kzm-fs-hero:47px;  --kzm-fs-hero-d:80px;  --kzm-lh-hero:.95;
  --kzm-fs-q:30px;     --kzm-fs-q-d:36px;     --kzm-lh-q:1.04;  /* (sheet) a question or screen title in Caprasimo */
  --kzm-fs-num:26px;                                            /* the phone number and wordmark in Caprasimo */
  --kzm-fs-sub:15px;   --kzm-fs-sub-d:18px;   --kzm-lh-sub:1.45;
  --kzm-fs-body:15px;  --kzm-fs-small:13px;
  --kzm-fs-button:17px;
  --kzm-fs-caps:10.5px; --kzm-fs-caps-d:12px; --kzm-fs-caps-xs:9px;

  /* shape */
  --kzm-r-button:12px; --kzm-r-control:12px; --kzm-r-card:16px; --kzm-r-sheet:24px; --kzm-r-sheet-top:28px;  /* card and sheet radii: (sheet) */
  --kzm-r-window:24px; --kzm-r-window-glass:17px; --kzm-r-window-d:36px; --kzm-r-window-glass-d:26px; --kzm-r-round:999px;
  --kzm-gasket-w:7px;  --kzm-gasket-w-d:10px;
  --kzm-trim:0 0 0 1.5px rgba(243,233,210,.26);      /* the chrome trim outside a gasket */

  /* shadows */
  --kzm-sh-button:0 3px 0 var(--kzm-mustard-ledge),0 12px 24px -10px rgba(0,0,0,.5);
  --kzm-sh-button-down:0 1px 0 var(--kzm-mustard-ledge),0 6px 14px -8px rgba(0,0,0,.5);
  --kzm-sh-window:0 18px 40px -18px rgba(0,0,0,.6);
  --kzm-sh-glass:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 10px 22px -6px rgba(0,0,0,.55);
  --kzm-sh-badge:drop-shadow(0 10px 14px rgba(0,0,0,.38));  /* a filter value */
  --kzm-sh-panel:inset 0 1px 0 rgba(255,255,255,.5),inset 0 14px 22px -16px rgba(15,35,24,.35);
  /* (sheet) */
  --kzm-sh-card:0 0 0 1px var(--kzm-line-paper),0 1px 2px rgba(20,33,26,.05);
  --kzm-sh-lift:0 0 0 1px rgba(29,58,41,.22),0 12px 24px -14px rgba(15,35,24,.4);
  --kzm-sh-sheet:0 30px 70px -20px rgba(15,35,24,.5),0 10px 24px -8px rgba(15,35,24,.25);

  /* the stripe: pin, band, band, the duco showing between */
  --kzm-stripe-pin:5px; --kzm-stripe-band:11px; --kzm-stripe-gap:5px;
  --kzm-stripe-pin-d:6px; --kzm-stripe-band-d:15px; --kzm-stripe-gap-d:6px;
  --kzm-stripe-summer-1:var(--kzm-cream); --kzm-stripe-summer-2:var(--kzm-mustard); --kzm-stripe-summer-3:var(--kzm-orange);
  --kzm-stripe-winter-1:var(--kzm-ice);   --kzm-stripe-winter-2:var(--kzm-mint);    --kzm-stripe-winter-3:var(--kzm-teal);

  /* season aliases, winter (heating) by default */
  --kzm-season-1:var(--kzm-stripe-winter-1); --kzm-season-2:var(--kzm-stripe-winter-2); --kzm-season-3:var(--kzm-stripe-winter-3);
  --kzm-season-shade:var(--kzm-orange);      /* shade under the active word: "heating" */
  --kzm-season-lit:var(--kzm-rust);          /* the lit word on cream */

  /* motion */
  --kzm-ease-paint:cubic-bezier(.65,0,.2,1);    /* the stripe painting on, a fill */
  --kzm-ease-out:cubic-bezier(.2,.8,.2,1);      /* things arriving */
  --kzm-ease-spin:cubic-bezier(.5,0,.2,1);      /* the badge turning on its rivet */
  --kzm-ease-frost:cubic-bezier(.3,0,.2,1);
  --kzm-ease-spring:cubic-bezier(.3,1.4,.5,1);  /* small hover lifts and turns */
  --kzm-t-quick:.15s; --kzm-t-ui:.35s; --kzm-t-shade:.8s; --kzm-t-paint:1.05s; --kzm-t-photo:1.1s; --kzm-t-frost:1.5s;
  --kzm-t-spin:1.05s; --kzm-t-swap:.32s;        /* the season changes this far into the spin */
  --kzm-stagger:.09s;
}
[data-season="summer"]{
  --kzm-season-1:var(--kzm-stripe-summer-1); --kzm-season-2:var(--kzm-stripe-summer-2); --kzm-season-3:var(--kzm-stripe-summer-3);
  --kzm-season-shade:var(--kzm-teal);
  --kzm-season-lit:var(--kzm-teal-deep);
}