/* DO NOT EDIT — generated from design-tokens.json by work/design-tokens/tokens.emit.mjs */

/* ccw-plumbing-heating · 2026-08-31 · roles from builds/ccw-plumbing-heating/direction/art-direction.md · values from intake/ccw-plumbing-heating/brand-kit.md */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-variable.woff2") format("woff2-variations");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --surface: #FFFFFF;
  --surface-alt: #F6FAFC;
  --scrim: #F4F9FB;
  --error-surface: #FDF7F9;
  --ink: #333333;
  --muted: #727272;
  --brand: #1A455B;
  --brand-deep: #102A37;
  --accent: #EB680E;
  --accent-hover: #E7660E;
  --on-accent: #0C1F28;
  --on-deep: #EDF5F9;
  --on-deep-muted: #8EB9CF;
  --border: #69727D;
  --error: #CC3366;
  --error-inverse: #E79DB6;
  --focus: #003552;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --gutter: 64px;
  --gutter-mobile: 16px;
  --section-pad-desktop: 96px;
  --section-pad-mobile: 56px;
  --maxw: 1200px;

  --radius-card: 16px;
  --radius-media: 8px;
  --radius-control: 8px;

  --shadow-rest: none;
  --shadow-interaction: 0 1px var(--s1) color-mix(in srgb, var(--brand-deep) 18%, transparent);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --step-display: clamp(42px, 1.333333vw + 36.8px, 56px);
  --step-h2: clamp(28px, 0.761905vw + 25.028571px, 36px);
  --step-h3: clamp(20px, 0.380952vw + 18.514286px, 24px);
  --step-body: clamp(17px, 0.095238vw + 16.628571px, 18px);
  --step-small: clamp(14px, 0.095238vw + 13.628571px, 15px);
  --step-price: clamp(28px, 0.380952vw + 26.514286px, 32px);
  --lh-display: 1.15;
  --lh-body: 1.5;
  --measure-body: 68ch;
}

/* the container primitive — the ONLY rule on this build permitted to set horizontal geometry.
   padding-inline only. Never the shorthand: a `padding:` here wipes the gutter and bleeds the
   hero to the viewport edge, which is the bug this generator exists to make unwritable. */
.wrap, .container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 768px) {
  .wrap, .container {
    padding-inline: var(--gutter-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* art-direction ## Motion: every moment renders its END STATE. Nothing is hidden,
     delayed, or made conditional on motion having run. */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}