/* ============================================================================
   tokens.css — Flood Damage Restoration Massachusetts design system.

   Values taken from the reference site (waterdamagerestorationelpaso.com):
   its rendered palette, type stack, content width and component geometry were
   read out of its HTML/CSS rather than guessed. The rendered colours come from
   that theme's Kadence palette variables:

     palette1  #e80000  primary red      (buttons, links, headings)
     palette5  #03a27e  teal             (top bar, icon badges, hover states)
     palette11 #13612e  dark green       (footer bottom bar)
     palette13 #b82105  dark red         (footer main background)
     palette14 #f7630c  orange           (accents)
     palette15 #f5a524  amber
     palette8  #f6f8f7  page background
     palette3  #e80000  heading colour
     palette6  #878787  grey text
     palette2  #668876  muted green-grey (borders)
     palette7  #e3e8e5  light separator

   Typography: Prompt for headings and navigation, Roboto for body — the same
   two families the reference site loads from Google Fonts.

   Edit ONLY the brand block below; every other value derives from it.
   ========================================================================= */

:root {
  /* ---- brand: the only block most edits touch ---------------------------- */
  --brand: #e80000;                              /* primary red            */
  --brand-strong: #b82105;                       /* darker red, hover      */
  --brand-soft: #fdeceb;
  --brand-2: #03a27e;                            /* teal                   */
  --brand-2-dark: #027a5f;                       /* teal dark enough for white text (5.3:1) */
  --brand-2-strong: #13612e;                     /* dark green             */
  --brand-2-soft: #e6f5f1;
  --accent: #f7630c;                             /* orange                 */
  --accent-strong: #d24f04;
  --accent-amber: #f5a524;
  --on-brand: #ffffff;
  --on-accent: #ffffff;
  --muted-green: #668876;

  /* ---- surfaces, lines, text -------------------------------------------- */
  --bg: #ffffff;
  --bg-soft: #f6f8f7;                            /* the reference page bg  */
  --bg-tint: #e3e8e5;
  --panel: #ffffff;
  --line: #e3e8e5;
  --line-strong: #c9d2cd;
  --text: #262626;
  --muted: #4a5568;
  --heading: #e80000;                            /* h1/h2/h3 colour        */

  /* ---- status ----------------------------------------------------------- */
  --ok: #13612e;
  --warn: #b45309;
  --danger: #b91c1c;

  /* ---- typography ------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: Poppins, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-label: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-body: var(--font-sans);

  /* scale — the reference site runs h1 40px base / 70px in the hero,
     h3 30px, body 16px, so the scale is top-heavy and fluid */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0: clamp(1.00rem, 0.97rem + 0.16vw, 1.06rem);
  --step-1: clamp(1.12rem, 1.06rem + 0.30vw, 1.25rem);
  --step-2: clamp(1.30rem, 1.18rem + 0.60vw, 1.60rem);
  --step-3: clamp(1.50rem, 1.28rem + 1.05vw, 2.10rem);
  --step-4: clamp(1.75rem, 1.36rem + 1.90vw, 2.75rem);
  --step-5: clamp(2.10rem, 1.30rem + 3.40vw, 4.40rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.75;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.06em;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* the reference theme capitalises every heading */
  --heading-transform: none;  /* was capitalize: produced "Restoration In", "24 To 48" */

  /* ---- space (4px rhythm) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: 1.5rem;
  --section-y: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --hero-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* ---- radius and elevation --------------------------------------------
     The reference site uses square corners for buttons and panels, with fully
     round icon badges. Both live here so nothing below hard-codes them. */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-pill: 200px;
  --border: 1px solid var(--line);
  --shadow-1: 0 1px 2px rgb(16 24 40 / 6%);
  --shadow-2: 0 8px 20px -6px rgb(16 24 40 / 12%);
  --shadow-3: 0 15px 25px -7px rgb(0 0 0 / 10%);

  /* ---- layout ----------------------------------------------------------- */
  --wrap: 1290px;                                /* the reference width    */
  --wrap-narrow: 842px;
  --header-h: 76px;
  --topbar-h: 60px;

  /* ---- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---- stacking --------------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;

  color-scheme: light;
}

/* ============================================================================
   Base — element defaults derived from the tokens above
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--heading);
  text-transform: var(--heading-transform);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
/* h3 lands between 20 and 26px, which counts as body text for contrast, so it
   takes the darker red that passes 4.5:1 on the off-white page background. */
h3 { font-size: var(--step-2); color: var(--brand-strong); }
h4 { font-size: var(--step-1); color: var(--brand-strong); }

p, ul, ol, dl, figure, blockquote { margin: 0 0 var(--space-4); }
p { max-width: 72ch; }
p.lede { font-size: var(--step-1); color: var(--muted); }
small { font-size: var(--step--1); }
strong { font-weight: var(--weight-bold); }

/* Body links use the darker red: #e80000 on the off-white page background is
   4.4:1, just under the 4.5:1 WCAG AA needs for body text, while #b82105 is
   6.0:1. Buttons and headings keep the brighter brand red, where the text is
   large enough to pass at 3:1. */
a { color: var(--brand-strong); text-underline-offset: 3px; }
a:hover { color: var(--brand); }

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin-inline: 0; }
figcaption { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-2); }

hr { border: 0; border-top: var(--border); margin: var(--space-7) 0; }

ul, ol { padding-left: 1.15em; }
li + li { margin-top: var(--space-2); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-3); border-bottom: var(--border); }
th { font-weight: var(--weight-semibold); }

blockquote { border-left: 3px solid var(--brand); padding-left: var(--space-4); color: var(--muted); }

/* ============================================================================
   Accessibility
   ========================================================================= */

:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .topbar, .skip-link, .cta-band { display: none; }
  body { background: #fff; color: #000; }
}