/* ==========================================================================
   RR All Solutions Construction · design tokens
   Every colour, size, easing and spacing value in this site is declared here.
   No component file may contain a raw hex value.
   ========================================================================== */

/* ---- 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. See README.
     HARD RULE: --brand-red on --ink is 3.82:1 and fails AA. On 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  */
  --ink:             #121110;   /* 18.86:1 on white                          */
  --ink-soft:        #232223;
  --steel:           #4F5159;   /* 7.91:1 on white  · body copy              */
  --steel-light:     #8A8C93;   /* 3.36:1 · borders and rules ONLY           */
  --surface:         #FFFFFF;
  --surface-alt:     #F5F5F6;

  /* Semantic roles */
  --bg:              var(--surface);
  --bg-alt:          var(--surface-alt);
  --bg-dark:         var(--ink);
  --text:            var(--ink);
  --text-body:       var(--steel);
  --text-on-dark:    #FFFFFF;
  --text-on-dark-2:  #C9CACE;   /* 11.1:1 on --ink                          */
  --hairline:        #E3E3E5;
  --hairline-strong: #C9C9CD;
  --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                    */

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

  /* Sized so the two hero lines never wrap to a third at any width between
     375px and 1440px. Verified, not eyeballed. See README. */
  --fs-display: clamp(2.25rem, 4.6vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 4.2vw, 3rem);
  --fs-h3:      clamp(1.3125rem, 2.2vw, 1.75rem);
  --fs-quote:   clamp(1.1875rem, 2.5vw, 1.75rem);
  --fs-h4:      clamp(1.0625rem, 1.4vw, 1.1875rem);
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;

  --lh-tight:  0.98;
  --lh-head:   1.06;
  --lh-body:   1.62;
  --tr-tight:  -0.025em;
  --tr-label:   0.14em;

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

  --section-y: clamp(64px, 9vw, 128px);
  --gutter:    clamp(20px, 5vw, 56px);
  --measure:   68ch;
  --container: 1180px;

  /* ---- 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:  620ms;
  --t-slow:   800ms;

  /* ---- 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 375px 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-display: 1.9375rem; }
}