/* tokens.css — THE only place colors/spacing/type live. THRED Realty language. */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-vf.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color */
  --paper:        #faf8f3;
  --paper-2:      #f3f0e8;
  --ink:          #0c0c0d;
  --ink-muted:    #54565a;
  --accent:       #0096ff;
  --accent-hover: #0077cc;
  --accent-soft:  #e8f4ff;
  --line:         #e4e2dc;
  --white:        #ffffff;
  --ok:           #1a7f37;
  --err:          #b42318;

  /* type */
  --font:         'Manrope', system-ui, -apple-system, sans-serif;
  --letter-tight: -.03em;
  --fs-h1:        clamp(28px, 4vw, 44px);
  --fs-h2:        clamp(22px, 3vw, 30px);
  --fs-body:      16px;
  --fs-small:     13px;
  /* WEIGHT SCALE — the single source of truth (Manrope tops out at 800; we cap
     bold at 700 like THRED Realty. NEVER hardcode font-weight in components —
     use these four so the whole site stays consistent). */
  --fw-reg:       400;   /* body text */
  --fw-med:       500;   /* secondary / muted detail */
  --fw-semi:      600;   /* labels, eyebrows, addresses */
  --fw-bold:      700;   /* headings, prices, the ONE emphasis per block */

  /* shape */
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 8px 24px rgba(12,12,13,.06);
  --shadow-lift:  0 12px 32px rgba(12,12,13,.10);
  --ease:         cubic-bezier(.2,.7,.2,1);

  /* layout */
  --nav-h:        64px;
  --pad-x:        20px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
/* RULE: links never underline by default — UI chrome (nav, chips, tabs, cards, buttons)
   must stay clean. Underline ONLY where explicitly opted in (e.g. footer/breadcrumb
   hover, the report-issue link). Stop adding per-component text-decoration:none. */
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { letter-spacing: var(--letter-tight); line-height: 1.15; }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); }
/* FULL WIDTH like the original site — no max-width cap, ever */
.container { width: 100%; margin: 0 auto; padding: 0 var(--pad-x); }
.muted { color: var(--ink-muted); }