/* ==========================================================================
   tokens.css — Mountain Peak Windows and Doors
   Every color and size decision on the site starts here.
   ========================================================================== */

:root {
  /* ---- Brand: sampled directly from the logo ---------------------------- */
  --pine:        #395340;  /* mountain body + wordmark — primary */
  --pine-mid:    #2C4032;  /* hover state for pine surfaces */
  --pine-deep:   #1D2A20;  /* footer, image overlays */
  --sage:        #628D5D;  /* trees + "windows and doors" — secondary */
  --sage-light:  #8AAE84;  /* dividers, muted marks on dark */
  --sage-deep:   #4C7448;  /* eyebrows on cream — sage itself is too light */

  /* ---- Accent: gold. Buttons and small accents only -------------------- */
  --brass:       #C38F45;
  --brass-dark:  #A8762F;
  --brass-soft:  #F3E4C8;

  /* ---- Neutrals: warm cream, per the 2026 redesign brief ---------------- */
  --paper:       #FFFDF8;  /* cards, lightest band */
  --bone:        #F8F3E8;  /* default page background (cream) */
  --bone-deep:   #EFE7D6;  /* alternating section bands */
  --sage-wash:   #E9EDE0;  /* soft green section background */
  --line:        #E0D8C6;  /* hairlines, input borders */
  --ink:         #1F2620;  /* body copy */
  --ink-soft:    #5A615A;  /* secondary copy, captions */
  --ink-faint:   #8C918A;  /* placeholders, meta */

  /* ---- Type ------------------------------------------------------------- */
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body:    "Karla", system-ui, -apple-system, sans-serif;

  --step--1:  clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:   clamp(1.00rem, 0.96rem + 0.18vw, 1.10rem);
  --step-1:   clamp(1.20rem, 1.12rem + 0.38vw, 1.44rem);
  --step-2:   clamp(1.44rem, 1.30rem + 0.70vw, 1.94rem);
  --step-3:   clamp(1.73rem, 1.50rem + 1.15vw, 2.62rem);
  --step-4:   clamp(2.07rem, 1.71rem + 1.80vw, 3.53rem);
  --step-5:   clamp(2.49rem, 1.93rem + 2.78vw, 4.77rem);

  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.14em;

  /* ---- Space ------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* ---- Structure -------------------------------------------------------- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;

  --shadow-s: 0 1px 2px rgba(27, 33, 29, 0.06);
  --shadow-m: 0 6px 20px -6px rgba(27, 33, 29, 0.16);
  --shadow-l: 0 20px 50px -18px rgba(27, 33, 29, 0.28);

  --header-h: 84px;
  --util-h: 40px;           /* "talk to a real person" strip above the bar */

  /* Logo shelf. The mark is 2.16:1, so its height is capped by the bar unless
     it gets its own box. --logo-panel-h drives how far that box hangs below. */
  --logo-h: 112px;
  --logo-pad-y: 14px;
  --logo-panel-h: calc(var(--logo-h) + (var(--logo-pad-y) * 2));
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 220ms;
}

@media (max-width: 1199px) {
  :root { --header-h: 68px; }
}