/* ==========================================================================
   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 */

  /* ---- Accent: brass. Window hardware, and the only non-green on screen -- */
  --brass:       #BE8535;
  --brass-dark:  #9E6C25;
  --brass-soft:  #F3E7D2;

  /* ---- Neutrals: tinted green-gray, not warm cream ---------------------- */
  --paper:       #FFFFFF;
  --bone:        #F2F4EF;  /* default page background */
  --bone-deep:   #E4E8E0;  /* alternating section bands */
  --sage-wash:   #E6EDE2;  /* soft green section background */
  --line:        #D6DCD3;  /* hairlines, input borders */
  --ink:         #1B211D;  /* body copy */
  --ink-soft:    #5C665F;  /* secondary copy, captions */
  --ink-faint:   #8A938C;  /* 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: 68px;

  /* 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: 88px;
  --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: 1099px) {
  :root { --header-h: 58px; }
}