/* ===========================================================================
 * HomeSight design system — CSS tokens.
 *
 * Mirror of `tokens.ts`. If you change one, change the other.
 * Imported once per app via `@import "@homesight/ui/tokens.css";` in the
 * app's entry CSS.
 *
 * The previous four-file palette lockstep (booking T, admin styles, admin
 * tokens, email shell) collapsed into this file in PR-M5. Edit here, every
 * app picks it up.
 * =========================================================================== */

:root {
  /* ------------------------------------------------------------------------ */
  /*  Palette — the six locked colors                                          */
  /* ------------------------------------------------------------------------ */

  --paper: #FDFCF7;            /* Background — Light Cream */
  --sage: #9DB198;             /* Accent 1 — Warm Sage */
  --sand: #EBDDC7;             /* Accent 2 — Soft Sand */
  --ink: #3A3026;              /* Text — Dark Bronze */
  --accent: #2C4C3B;           /* CTA — Deep Teal-Green */
  --sienna: #BF8B59;           /* Interactive — Golden Sienna */

  /* Allowed off-palette: the Elev 2 selected tint. */
  --sand-tint: #F1E6D3;

  /* Allowed off-palette: Limitations in a report — what the inspection could
     not see or reach. A warm yellow so it can't be read as the Repair orange.
     FILL ONLY: always with --ink text and symbols on it. Yellow text or a
     yellow symbol on paper is too faint to read. */
  --limitation: #E3B341;

  /* Interaction states (pre-mixed, intentional). */
  --accent-hover: #244031;
  --accent-pressed: #1C3327;
  --sienna-hover: #A87844;

  /* Focus glow — 20% sienna, used everywhere focus is shown. */
  --focus-glow: rgba(191, 139, 89, 0.20);

  /* Legacy admin aliases (kept for compatibility with existing styles.css). */
  --card: var(--paper);
  --mute: #5D4F3F;
  --mute-2: #897761;
  --scrim: rgba(58, 48, 38, 0.06);

  /* ------------------------------------------------------------------------ */
  /*  Typography                                                               */
  /* ------------------------------------------------------------------------ */

  --font-display: "Big Shoulders Display", "Big Shoulders", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — size + line-height pairs. */
  --fs-display: 56px;
  --lh-display: 0.95;
  --fs-h1: 40px;
  --lh-h1: 1.05;
  --fs-h2: 28px;
  --lh-h2: 1.1;
  --fs-h3: 22px;
  --lh-h3: 1.15;
  --fs-h4: 18px;
  --lh-h4: 1.2;
  --fs-body-lg: 18px;
  --lh-body-lg: 1.55;
  --fs-body: 16px;
  --lh-body: 1.6;
  --fs-body-sm: 14px;
  --lh-body-sm: 1.55;
  --fs-caption: 12px;
  --lh-caption: 1.4;
  --fs-eyebrow: 11px;

  /* ------------------------------------------------------------------------ */
  /*  Spacing — 4pt baseline                                                   */
  /* ------------------------------------------------------------------------ */

  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ------------------------------------------------------------------------ */
  /*  Radii                                                                    */
  /* ------------------------------------------------------------------------ */

  --r-0: 0;
  --r-1: 2px;
  --r-2: 6px;       /* buttons, inputs, small interactive surfaces */
  --r-3: 10px;      /* cards, drawer head, segmented track edge */
  --r-4: 14px;      /* large surfaces — table wrap, calendar grid container */
  --r-pill: 999px;

  /* Legacy aliases. */
  --radius-sm: var(--r-2);
  --radius-md: var(--r-3);
  --radius-lg: var(--r-4);
  --radius-xl: var(--r-4);
  --radius-pill: var(--r-pill);

  /* ------------------------------------------------------------------------ */
  /*  Motion — one ease, three durations                                       */
  /* ------------------------------------------------------------------------ */

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ------------------------------------------------------------------------ */
  /*  Elevation — borders only, never box-shadow                               */
  /* ------------------------------------------------------------------------ */

  /* These are intentionally `none` per the flat-elevation rule. The only
   * place a shadow-like effect is allowed is on drawers and modals via an
   * inset outline; see --shadow-lg below. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: inset 0 0 0 1.5px var(--ink);
}

/* Tabular numerals for prices, times, counters. */
.tnum,
[data-tnum] {
  font-variant-numeric: tabular-nums;
}

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

/* CDAInspections.com — site styles.
 * build.mjs puts @homesight/ui tokens.css in front of this file, so every
 * color, font, space, radius and motion value below is a token. No hex here.
 * Flat elevation: borders only, never a shadow. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--sienna); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: var(--sp-2); background: var(--accent); color: var(--paper); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-2); z-index: 20; }
.skip:focus { left: var(--sp-4); }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: 0.005em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h3 a { color: inherit; text-decoration: none; text-transform: none; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h4); }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0; padding: 0; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-4); }
.eyebrow { margin: 0 0 var(--sp-3); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sienna); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); max-width: 62ch; margin: var(--sp-4) 0 var(--sp-5); }
.note { color: var(--mute); max-width: 70ch; margin-top: var(--sp-5); }
.note-box { border: 1.5px solid var(--sand); border-left: 4px solid var(--sienna); border-radius: var(--r-2); padding: var(--sp-4); margin: var(--sp-5) 0 0; background: var(--paper); }
.more { font-weight: 600; text-decoration: none; color: var(--sienna); }
.more:hover { color: var(--sienna-hover); text-decoration: underline; }

/* Buttons: 6px radius, 1.5px border, 44px target. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--sp-5);
  border: 1.5px solid var(--accent); border-radius: var(--r-2);
  font: 600 var(--fs-body-sm)/1 var(--font-sans);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--paper); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); }
.btn--primary:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--sand-tint); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--sand); }
.site-header__row { display: flex; align-items: center; gap: var(--sp-5); min-height: 72px; }
.brand img { width: 160px; height: auto; }
.nav { display: none; gap: var(--sp-5); margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-body-sm); padding: var(--sp-2) 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { border-bottom-color: var(--sienna); color: var(--ink); }
.site-header__cta { display: none; align-items: center; gap: var(--sp-4); }
.phone { font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.menu { margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--sp-4); border: 1.5px solid var(--ink); border-radius: var(--r-2); font-weight: 600; font-size: var(--fs-body-sm); }
.menu summary::-webkit-details-marker { display: none; }
.menu__panel { position: absolute; right: 0; top: calc(100% + var(--sp-2)); min-width: 220px; display: flex; flex-direction: column; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-3); padding: var(--sp-2); }
.menu__panel a { padding: var(--sp-3) var(--sp-4); color: var(--ink); text-decoration: none; font-weight: 500; border-radius: var(--r-2); }
.menu__panel a:hover { background: var(--sand-tint); }

/* Hero */
.hero { padding: var(--sp-7) 0 var(--sp-6); }
.hero__row { display: grid; gap: var(--sp-6); align-items: center; }
.hero h1 { font-size: 44px; line-height: var(--lh-display); }
.hero__panel { background: var(--accent); color: var(--paper); border-radius: var(--r-4); padding: var(--sp-6); }
.hero__panel p { margin: 0; color: var(--paper); }
.hero__big { font-family: var(--font-display); font-weight: 700; font-size: 96px; line-height: 0.9; color: var(--paper); }
.hero__panel ul { list-style: none; margin-top: var(--sp-5); border-top: 1px solid var(--sage); }
.hero__panel li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--sage); font-weight: 500; }
.hero__media img { border-radius: var(--r-4); width: 100%; }
.proof { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.proof li { border-left: 2px solid var(--sienna); padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Sections */
.section { padding: var(--sp-7) 0; }
.band { padding: var(--sp-7) 0; }
.band--sand { background: var(--sand); }
.band--accent { background: var(--accent); color: var(--paper); }
.band--accent h2 { color: var(--paper); }
.closing { text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing p { max-width: 56ch; color: var(--paper); margin-top: var(--sp-3); }
.closing .actions { justify-content: center; }
.band--accent .btn--primary { background: var(--paper); color: var(--accent); border-color: var(--paper); }
.band--accent .btn--primary:hover { background: var(--sand); border-color: var(--sand); }
.band--accent .btn--outline { color: var(--paper); border-color: var(--paper); }
.band--accent .btn--outline:hover { background: var(--accent-hover); color: var(--paper); }

.page-head { padding: var(--sp-7) 0 var(--sp-5); border-bottom: 1px solid var(--sand); }
.page-head h1 { max-width: 20ch; }

.grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.card { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--r-3); padding: calc(var(--sp-5) + 0.5px); color: var(--ink); text-decoration: none; display: block; }
.card h3 { margin-bottom: var(--sp-3); }
.card--photo { padding: 0; overflow: hidden; }
.card--photo .card__body { padding: calc(var(--sp-5) + 0.5px); }
.card--photo.card--link:hover { padding: 0; }
.card--photo.card--link:hover .card__body { padding: var(--sp-5); }
.card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--sand); }
.figure { margin: var(--sp-6) auto 0; }
.figure img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--r-4); border: 1px solid var(--sand); }
.card p { margin: 0 0 var(--sp-3); }
.card--link { transition: border-color var(--dur) var(--ease); }
.card--link:hover { border: 1.5px solid var(--ink); padding: var(--sp-5); color: var(--ink); }
.band--sand .card { border-color: var(--paper); }
.band--sand .card--link:hover { border-color: var(--ink); }
.chip { display: inline-block; margin-bottom: var(--sp-3); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--sienna); color: var(--ink); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.steps { list-style: none; display: grid; gap: var(--sp-5); margin: var(--sp-5) 0; }
.steps li { display: flex; gap: var(--sp-4); }
.steps__n { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--sienna); font-variant-numeric: tabular-nums; min-width: 2ch; }
.steps h3 { margin-bottom: var(--sp-2); }
.steps p { margin: 0; }

.two-col { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.list-title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.ticks { list-style: none; display: grid; gap: var(--sp-3); }
.ticks li { position: relative; padding-left: var(--sp-5); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.prose { max-width: 860px; }

.faq { border-bottom: 1px solid var(--paper); }
.faq summary { cursor: pointer; padding: var(--sp-4) 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--fs-h3); color: var(--sienna); line-height: 1; }
.faq[open] summary::after { content: "\2212"; }
.faq p { padding-bottom: var(--sp-4); margin: 0; }

/* Reviews: a swipeable row on small screens, a grid on large. */
.reviews { list-style: none; display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--sp-5) 0 var(--sp-3); margin: 0; }
.review { flex: 0 0 min(86%, 360px); scroll-snap-align: start; background: var(--paper); border-radius: var(--r-3); padding: var(--sp-5); display: flex; flex-direction: column; }
.stars { color: var(--sienna); letter-spacing: 0.15em; margin: 0 0 var(--sp-3); }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { margin: 0 0 var(--sp-4); }
.review__who { margin: 0; display: flex; flex-direction: column; font-size: var(--fs-body-sm); }
.review__who span { color: var(--mute); }

/* Team */
.team { list-style: none; display: grid; gap: var(--sp-4); margin: var(--sp-5) 0; }
.avatar { width: 112px; height: 112px; border-radius: var(--r-pill); object-fit: cover; object-position: center 20%; margin-bottom: var(--sp-4); }
.avatar--initials { display: flex; align-items: center; justify-content: center; background: var(--sand); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); }

/* Footer */
.site-footer { background: var(--ink); color: var(--paper); padding: var(--sp-7) 0 var(--sp-6); }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--sand); }
.site-footer h3 { color: var(--sienna); font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; display: grid; gap: var(--sp-2); }
.site-footer address { font-style: normal; margin-bottom: var(--sp-3); }
.site-footer__top { display: grid; gap: var(--sp-6); }
.site-footer__logo { width: 180px; margin-bottom: var(--sp-4); }
.site-footer__tag { font-family: var(--font-display); font-size: var(--fs-h3); text-transform: uppercase; font-weight: 700; margin-bottom: var(--sp-2); }
.site-footer__sm { font-size: var(--fs-body-sm); color: var(--sand); }
.site-footer .btn--primary { background: var(--paper); color: var(--accent); border-color: var(--paper); }
.site-footer__legal { margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--mute); font-size: var(--fs-body-sm); color: var(--sand); }
.site-footer__legal a { margin-left: var(--sp-3); }

/* Phone bar: Call and Book stay in reach on small screens. */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper); border-top: 1px solid var(--sand); }
.mobile-bar .btn { flex: 1; }
.mobile-bar .btn--outline { flex: 0 0 30%; }
body { padding-bottom: 72px; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .grid--4, .team { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: repeat(2, 1fr); }
  .steps--2 { grid-template-columns: repeat(2, 1fr); }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
  h2 { font-size: 36px; }
  .hero h1 { font-size: var(--fs-display); }
  .hero__row { grid-template-columns: 1.1fr 0.9fr; }
  .nav, .site-header__cta { display: flex; }
  .menu { display: none; }
  .grid--3, .team { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .proof { grid-template-columns: repeat(4, 1fr); }
  /* Seven cards of different lengths read best as columns, not a ragged grid. */
  .reviews { display: block; column-count: 3; column-gap: var(--sp-4); overflow: visible; }
  .review { flex: initial; display: block; break-inside: avoid; margin-bottom: var(--sp-4); }
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}