/* ==========================================================================
   All Solutions Construction R&R · design tokens · 2026 rebuild
   Every colour, size, easing and spacing value lives here.
   No component file may contain a raw hex value.

   Brand carried over from the 2026-07 build: red #DC1E25, graphite, white.
   What changed: the ground is now warm stone rather than pure white, the
   display scale is larger, and the section rhythm is looser. Both moves are
   what separates a premium remodeler site from a generic contractor one.
   ========================================================================== */

/* ---- Typefaces ---------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colour ----------------------------------------------------------
     Contrast ratios are measured, not estimated.
     HARD RULE: --brand-red on --ink is 3.82:1 and fails AA. On a dark ground
     red is only ever a fill behind white text, or a rule. Never type.      */
  --brand-red:       #DC1E25;   /* 4.93:1 on white  · AA body               */
  --brand-red-deep:  #8A181D;   /* 9.42:1 on white  · red type, light only  */
  --brand-red-dark:  #B5171D;   /* pressed state                            */

  --ink:             #16151A;   /* 17.9:1 on --bone                          */
  --ink-2:           #201F25;   /* raised panels on ink                      */
  --steel:           #55535C;   /* 7.3:1 on --bone  · body copy              */
  --steel-light:     #8C8A93;   /* 3.4:1 · borders and rules ONLY            */

  --bone:            #FAF9F7;   /* warm page ground                          */
  --stone:           #F0EEEA;   /* alt band                                  */
  --stone-2:         #E4E1DB;   /* hairline on stone                         */
  --white:           #FFFFFF;

  /* Semantic roles */
  --bg:              var(--bone);
  --bg-alt:          var(--stone);
  --bg-dark:         var(--ink);
  --text:            var(--ink);
  --text-body:       var(--steel);
  --text-on-dark:    #FFFFFF;
  --text-on-dark-2:  #B9B7C0;   /* 8.4:1 on --ink                            */
  --hairline:        #E2DFD9;
  --hairline-strong: #C9C6BF;
  --hairline-dark:   #34323B;   /* rules on --ink                            */
  --accent:          var(--brand-red);
  --accent-type:     var(--brand-red-deep);
  --on-accent:       #FFFFFF;
  --focus:           var(--brand-red-deep);
  --error:           var(--brand-red-deep);
  --success-bg:      #E8F1EA;
  --success-fg:      #1B4A2E;   /* 8.6:1 on --success-bg                     */

  /* Scrims. The hero photo is a real phone shot, so the scrim does the work
     of holding AA contrast under the headline rather than a flat overlay. */
  --scrim-hero: linear-gradient(
      to top,
      rgba(10,9,12,0.92) 0%,
      rgba(10,9,12,0.82) 26%,
      rgba(10,9,12,0.54) 54%,
      rgba(10,9,12,0.26) 78%,
      rgba(10,9,12,0.34) 100%);

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

  /* Sized so the hero headline holds two lines from 320px to 1920px.
     Verified with a real render, not eyeballed. */
  --fs-hero:    clamp(2.6rem, 6.6vw, 5.75rem);
  --fs-display: clamp(2.1rem, 4.9vw, 4rem);
  --fs-h2:      clamp(1.8rem, 3.7vw, 2.9rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-statement: clamp(1.3rem, 2.5vw, 2.05rem);
  --fs-quote:   clamp(1.15rem, 2.3vw, 1.7rem);
  --fs-h4:      clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;
  --fs-numeral: clamp(2.6rem, 5.4vw, 4.6rem);

  --lh-hero:   0.94;
  --lh-tight:  0.99;
  --lh-head:   1.06;
  --lh-body:   1.65;
  --tr-hero:   -0.035em;
  --tr-tight:  -0.025em;
  --tr-label:   0.15em;

  /* ---- Space (4px base) ------------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;  --s-10: 96px; --s-11: 128px; --s-12: 168px;

  --section-y: clamp(72px, 10vw, 152px);
  --gutter:    clamp(20px, 5vw, 64px);
  --measure:   64ch;
  --container: 1240px;
  --container-wide: 1560px;
  --header-h:  84px;

  /* ---- Form ------------------------------------------------------------
     Deliberately near-square. This brand is industrial, not soft.          */
  --radius:    2px;
  --radius-lg: 3px;
  --rule:      1px solid var(--hairline);
  --rule-strong: 2px solid var(--ink);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   150ms;
  --t-press:  180ms;
  --t-enter:  700ms;
  --t-slow:   900ms;

  /* ---- Layers ----------------------------------------------------------
     The menu sheet sits above the call bar but under the header, so the
     header keeps its logo and close button visible while the menu is open. */
  --z-header: 100;
  --z-menu: 95;
  --z-callbar: 90;
}

/* Below the 360px design floor the hero headline would run to a third line.
   Small phones get a slightly smaller display size instead. */
@media (max-width: 359px) {
  :root { --fs-hero: 2.3rem; --fs-h2: 1.65rem; }
}