/* ==========================================================================
   HHBLUX — HERITAGE HOME BUILDERS
   Base reset + design tokens. Mocca-inspired: near-white paper, black ink.
   ========================================================================== */

:root {
  /* Palette — no accent color. Ink on paper only. */
  --paper: #f4f2ee;          /* warm off-white background */
  --paper-2: #ede9e2;        /* subtle secondary paper */
  --ink: #111111;            /* body ink */
  --ink-2: #2a2a2a;          /* softer ink for body text */
  --ink-3: #6b6a67;          /* meta ink */
  --hair: rgba(17, 17, 17, 0.14); /* thin hair rules */
  --hair-2: rgba(17, 17, 17, 0.06);

  /* Type */
  --font-sans: "Neue Haas Grotesk Text Pro", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "GT Sectra", "Söhne", "Neue Haas Grotesk Display", "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes — restrained; large only for hero wordmark and section titles. */
  --fs-nav: 12px;
  --fs-eyebrow: 11px;
  --fs-body: 15px;
  --fs-body-lg: 17px;
  --fs-h3: clamp(22px, 2.2vw, 32px);
  --fs-h2: clamp(32px, 4.4vw, 64px);
  --fs-hero: clamp(48px, 8vw, 128px);

  /* Layout */
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --stack-xs: 8px;
  --stack-sm: 16px;
  --stack-md: 32px;
  --stack-lg: 64px;
  --stack-xl: 120px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 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: 1.55;
  letter-spacing: -0.005em;
  font-weight: 400;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity .3s var(--ease); }
a:hover { opacity: 0.6; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }

::selection { background: var(--ink); color: var(--paper); }

/* Utility */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.hair { border: 0; height: 1px; background: var(--hair); margin: 0; }