/* ============================================================
   Neighbourhood — vanilla base layer (no framework)
   ------------------------------------------------------------
   For plain-HTML / non-Tailwind consumers. Import this once,
   then add component CSS from components/*.css:

     @import "./base.css";
     @import "./components/button.css";

   It pulls in the tokens, applies a light reset and the brand
   body defaults, and ships the type-role + layout utility
   classes used across the site. Tailwind projects use theme.css
   instead — this file is the plain-CSS equivalent.
   ============================================================ */

@import "./tokens.css";

/* ---- Reset (light) ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 1.125rem;           /* 18px — V4 enterprise body */
  font-weight: var(--weight-medium);  /* 500 readable workhorse; brand "confident body" uses 600 via .lead */
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-base);   /* 0.5% — V4 */
  color: var(--text-default);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---- Type roles (mirror of the live homepage) -------------- */
.h-hero,    .text-hero    { font-size: var(--text-hero);    line-height: var(--leading-display); letter-spacing: var(--tracking-base); font-weight: var(--weight-bold); }
.h-sub,     .text-sub     { font-size: var(--text-sub);     line-height: 0.98;                   letter-spacing: var(--tracking-base); font-weight: var(--weight-bold); }
.h-section, .text-section { font-size: var(--text-section); line-height: 1.05;                   letter-spacing: var(--tracking-base); font-weight: var(--weight-bold); }
.h-card,    .text-card    { font-size: var(--text-eyebrow); line-height: 1.1;                    letter-spacing: var(--tracking-base); font-weight: var(--weight-semibold); }
.h-pull,    .text-pull    { font-size: var(--text-pull);    line-height: 1.3;                    letter-spacing: var(--tracking-base); font-weight: var(--weight-semibold); }
.h-stat-xl, .text-stat    { font-size: var(--text-stat);    line-height: var(--leading-stat);    letter-spacing: var(--tracking-base); font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }
.lead      { font-size: var(--text-lead); line-height: 1.5;  letter-spacing: var(--tracking-base); font-weight: var(--weight-semibold); }
.small     { font-size: var(--text-sm);   line-height: 1.5;  letter-spacing: var(--tracking-base); }
.micro     { font-size: var(--text-xs);   line-height: 1.45; letter-spacing: var(--tracking-label); }
.eyebrow   { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }

/* ---- Layout: named containers ------------------------------ */
.w-prose    { max-width: var(--width-prose);    margin-inline: auto; }
.w-narrow   { max-width: var(--width-narrow);   margin-inline: auto; }
.w-readable { max-width: var(--width-readable); margin-inline: auto; }
.w-default  { max-width: var(--width-default);  margin-inline: auto; }
.w-wide     { max-width: var(--width-wide);     margin-inline: auto; }
.w-canvas   { max-width: min(100% - 6vw, var(--width-canvas)); margin-inline: auto; }
.w-edge     { max-width: min(100% - 4vw, var(--width-edge));   margin-inline: auto; }
.gutter     { padding-inline: var(--gutter); }

/* ---- Layout: vertical rhythm ------------------------------- */
.pad-sm { padding-block: var(--pad-sm); }
.pad-md { padding-block: var(--pad-md); }
.pad-lg { padding-block: var(--pad-lg); }
.pad-xl { padding-block: var(--pad-xl); }

/* ---- Element rhythm: stacks (gap between flow children) ----- */
.stack-tight   > * + * { margin-top: var(--stack-tight); }
.stack-default > * + * { margin-top: var(--stack-default); }
.stack-relaxed > * + * { margin-top: var(--stack-relaxed); }
.stack-loose   > * + * { margin-top: var(--stack-loose); }
.stack-section > * + * { margin-top: var(--stack-section); }

/* ---- Shared interaction helper ----------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.measure { max-width: var(--measure); }