/* ==========================================================================
   Design tokens - the single source of truth for the visual system.

   The palette is not invented. It comes from Chad's supplied vector logo in
   brand-source/: #EC2225 red, near-black, white. That red also happens to
   read as red-oxide primer on structural steel, which is what he actually
   builds with, so it carries the commercial side honestly.

   Two "sides" share one system:
     [data-side="residential"]  warm surfaces, same red
     [data-side="commercial"]   cool steel surfaces, same red
   Set by each page's `theme:` meta key. Change a token here, it propagates.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand ------------------------------------------------------------ */
  /* --red-brand is the exact value from the supplied vector logo
     (brand-source/sc-logo-only.svg). It is used on the logo mark itself and
     nowhere else.
     At #EC2225, white text on a red button measures 4.36:1, which fails AA
     for anything under 18.66px bold. The primary call button is 14px bold,
     so the brand red would have failed on the single most important element
     on the site. --red is therefore that red darkened by about 4%, clearing
     AA at 4.56:1 and visually indistinguishable next to the mark.
     For red *text* on a light surface, use --red-ink (5.9:1). */
  --red-brand: #ec2225; /* exact logo value, used on the mark only */
  --red: #e62124;
  --red-hover: #c8161e;
  --red-ink: #c8161e;
  --red-deep: #9c1017;
  --red-wash: rgba(230, 33, 36, 0.08);
  --red-line: rgba(230, 33, 36, 0.28);

  /* --- Neutrals: cool steel ratchet ------------------------------------- */
  --ink-900: #0b0b0c;
  --ink-800: #141619;
  --ink-700: #1e2126;
  --ink-600: #2b3037;
  --steel-500: #3d444c;
  --steel-400: #5b636d;
  --steel-300: #868e99;
  --steel-200: #b9c0c8;
  --steel-100: #dde1e6;
  --steel-50: #eef0f3;
  --paper: #f7f8f9;
  --white: #ffffff;

  /* --- Neutrals: warm, for the residential side ------------------------- */
  --sand-50: #faf8f5;
  --sand-100: #f2ede6;
  --sand-200: #e4dcd0;
  --sand-300: #cbbfae;

  /* --- Semantic surfaces (overridden per side below) -------------------- */
  --bg: var(--white);
  --bg-alt: var(--paper);
  --bg-deep: var(--ink-900);
  --bg-deep-alt: var(--ink-800);

  --text: var(--ink-800);
  --text-muted: var(--steel-400);
  --text-on-deep: #f4f5f6;
  --text-on-deep-muted: var(--steel-300);

  --border: var(--steel-100);
  --border-strong: var(--steel-200);
  --border-on-deep: rgba(255, 255, 255, 0.12);

  --accent: var(--red);
  --accent-text: var(--red-ink);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid scale. Body stays fixed for readability; headings breathe. */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.35vw + 1.05rem, 1.3rem);
  --fs-xl: clamp(1.35rem, 0.8vw + 1.15rem, 1.75rem);
  --fs-2xl: clamp(1.7rem, 1.6vw + 1.3rem, 2.4rem);
  --fs-3xl: clamp(2.1rem, 2.8vw + 1.4rem, 3.25rem);
  --fs-4xl: clamp(2.5rem, 4.6vw + 1.3rem, 4.5rem);

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-body: 1.62;

  --ls-tight: -0.022em;
  --ls-flat: -0.011em;
  --ls-caps: 0.12em;

  /* --- Space (4px base) ------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Vertical rhythm for page sections, tightened on small screens. */
  --section-y: clamp(3.5rem, 7vw, 7rem);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1180px;
  --container-wide: 1420px;
  --container-text: 68ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 10px;

  /* Squared-off corners suit a builder better than pill shapes. Keep it. */

  /* --- Depth ------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.07);
  --shadow: 0 6px 20px rgba(11, 11, 12, 0.09);
  --shadow-lg: 0 22px 60px rgba(11, 11, 12, 0.18);

  --ring: 0 0 0 3px rgba(230, 33, 36, 0.35);

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 130ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-slow: 480ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --header-h: 72px;
}

/* --------------------------------------------------------------------------
   Residential: warmer paper and borders. Homeowners are buying a home, not
   a structure, and the surfaces should feel like it.
   -------------------------------------------------------------------------- */
[data-side='residential'] {
  --bg: var(--white);
  --bg-alt: var(--sand-50);
  --bg-deep: #17140f;
  --bg-deep-alt: #221d16;
  --border: var(--sand-200);
  --border-strong: var(--sand-300);
  --text-muted: #6d6459;
}

/* --------------------------------------------------------------------------
   Commercial: cool, flat, structural. Buyers here are credential-driven and
   respond to precision over warmth.
   -------------------------------------------------------------------------- */
[data-side='commercial'] {
  --bg: var(--white);
  --bg-alt: var(--steel-50);
  --bg-deep: var(--ink-900);
  --bg-deep-alt: var(--ink-800);
  --border: var(--steel-100);
  --border-strong: var(--steel-200);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t: 1ms;
    --t-slow: 1ms;
  }
}