/* ==========================================================================
   Suite Home Renovations — main.css
   Foundation: design tokens, reset, base typography, layout primitives,
   dark/light section rhythm, responsive scale.

   Load order (no @import — avoids render-blocking chains):
     1. css/main.css        ← this file (tokens + base + layout)
     2. css/components.css   (buttons, nav, cards, footer …)
     3. css/animations.css   (from-states, keyframes, reduced-motion)

   Aesthetic: "Dark Editorial Luxe". Mobile-first. All media queries in rem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   Breakpoint scale (rem @ 16px base) — used as min-width queries throughout:
     (base) ≤360px   mobile-first core, no query (≥320 safe)
     xxs    360 → 22.5rem    common Android (Galaxy)
     iphone 390 → 24.375rem  iPhone 12–15
     pixel  412 → 25.75rem   Pixel / large Android
     max    430 → 26.875rem  iPhone Pro Max
     xs     480 → 30rem      large phone — 2-up grids begin
     sm     640 → 40rem      small tablet
     md     768 → 48rem      tablet — mega-menu replaces drawer
     lg     1024 → 64rem     laptop — full desktop nav, 3-up grids
     xl     1280 → 80rem     desktop — base container max
     2xl    1440 → 90rem     large desktop — container + type step up
     3xl    2560 → 160rem    QHD / ultrawide
     4xl    3840 → 240rem    4K — cap and re-center
   -------------------------------------------------------------------------- */
:root {
  /* ---- Palette (locked, from build brief) ---- */
  --c-base:        #14110F;   /* near-black — dark sections, backgrounds */
  --c-brass:       #C9A36A;   /* champagne brass — accents, CTAs, headings on dark */
  --c-brass-deep:  #B58E54;   /* darker brass for hovers/borders */
  --c-warm-white:  #E8E2D9;   /* warm light section background */
  --c-off-white:   #F7F5F0;   /* alternating light cards/sections */
  --c-white:       #FFFFFF;   /* content areas */
  --c-muted:       #6B6560;   /* body text / captions on light */
  --c-on-dark:     #C5BDB3;   /* secondary text on dark base */
  --c-base-deep:   #0E0C0B;   /* footer / deepest dark */

  /* hairlines */
  --c-line-dark:  rgba(201, 163, 106, .22);
  --c-line-light: rgba(20, 17, 15, .12);

  /* ---- Semantic tokens (remapped per section theme — see §5) ---- */
  --bg:      var(--c-base);
  --fg:      var(--c-on-dark);
  --heading: var(--c-warm-white);
  --accent:  var(--c-brass);
  --line:    var(--c-line-dark);

  /* ---- Font families ---- */
  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Fluid type scale (clamp: mobile → desktop) ---- */
  --fs-overline: .75rem;                               /* 12px uppercase label */
  --fs-small:    .875rem;                              /* 14px */
  --fs-body:     clamp(1rem, .95rem + .25vw, 1.125rem);/* 16 → 18 */
  --fs-lead:     clamp(1.125rem, 1rem + .6vw, 1.375rem);
  --fs-h3:       clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --fs-h2:       clamp(1.875rem, 1.4rem + 2.2vw, 3rem);  /* 30 → 48 */
  --fs-h1:       clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);  /* 40 → 72 */
  --fs-display:  clamp(3rem, 2rem + 6vw, 6rem);          /* hero 5.0 stat */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;  --sp-32: 8rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8rem);   /* vertical section padding */

  /* ---- Layout ---- */
  --maxw: 78rem;            /* ~1248px content max (xl). Steps up on big screens. */
  --maxw-text: 42rem;       /* ~672px — comfortable prose measure (~70ch) */
  --gutter: clamp(1.25rem, .8rem + 2vw, 3rem);
  --radius: 4px;
  --radius-lg: 12px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .18s;
  --dur: .35s;
  --dur-slow: .6s;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(20, 17, 15, .06), 0 4px 12px rgba(20, 17, 15, .06);
  --shadow-md: 0 1px 2px rgba(20, 17, 15, .08), 0 14px 34px rgba(20, 17, 15, .12);
  --shadow-brass: 0 14px 40px rgba(201, 163, 106, .18);

  /* ---- Layering ---- */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-rail: 90; --z-nav: 100; --z-drawer: 1000; --z-skip: 1100;

  /* ---- Chrome ----
     Height of the CONDENSED nav bar (.nav--scrolled). Single-sourced because two
     unrelated things need it: .nav__bar's own height, and .read-progress, which
     pins to the nav's bottom edge from outside the nav. Change it here only.
     The at-rest height (4.75rem / 5.25rem at lg) stays local to .nav__bar —
     nothing outside the nav needs it, because .nav--scrolled's higher specificity
     makes the condensed value win at every breakpoint. */
  --nav-h-scrolled: 4rem;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep in-page anchor targets (#timeline etc.) clear of the fixed nav. */
  scroll-padding-top: 5.5rem;
}

body {
  min-height: 100vh;
  background: var(--c-base);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;             /* belt-and-braces against horizontal scroll */
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

img, video { background: rgba(255, 255, 255, .03); }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

:where(h1, h2, h3, h4) { overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }

/* Visible, on-brand focus ring everywhere — never removed (a11y). */
:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Honor reduced-motion at the document level too (animations.css does the rest). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--heading);
  letter-spacing: -.01em;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); }

p { font-size: var(--fs-body); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg);
}

strong, b { font-weight: 600; }
em, .italic { font-style: italic; }

/* Uppercase tracked label (Inter 600) — used above section headings */
.overline {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-overline);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Tabular numerals for stats/prices to prevent jitter */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Narrow container for prose-heavy blocks (keeps a readable measure) */
.container--narrow { max-width: 56rem; }

.section {
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
  position: relative;
}

/* Vertical flow utility — consistent rhythm between stacked children */
.flow > * + * { margin-top: var(--flow-space, var(--sp-4)); }
.flow--lg > * + * { margin-top: var(--sp-8); }

/* Generic responsive auto-grid (cards). gap + min column width are tunable. */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--sp-6));
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}

/* Section header block (overline + heading + optional lead) */
.section-head { max-width: 46rem; }
.section-head .overline { margin-bottom: var(--sp-3); }
.section-head .lead { margin-top: var(--sp-4); }
/* Editorial rhythm: generous step down from the intro line, even gap between body paragraphs */
.section-head .lead + p { margin-top: var(--sp-5); }  /* even body-paragraph rhythm */
.section-head p + p     { margin-top: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }

/* One consistent reading size. The lead and every paragraph that follows are
   typeset identically — same size, weight, colour and leading — so the block
   reads as a single calm column. The eye steps down once (H2 → body), never
   through the half-steps that read as a mistake. Emphasis in this section is
   carried by the heading, the trade-tags and the CTA, not by the prose. */
.section-head .lead,
.section-head .lead ~ p { font-size: var(--fs-lead); line-height: var(--lh-body); }
/* Breathing room above the (now prominent) intro CTA, whether it follows a
   paragraph or the trade-tags strip. */
.section-head > .btn { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   5. DARK / LIGHT SECTION RHYTHM
   --------------------------------------------------------------------------
   Each theme class remaps the semantic tokens, so every component recolors
   automatically with no per-section overrides.
   A11y note: on warm-white, muted #6B6560 only reaches ~4.1:1 (fails AA),
   so --fg maps to the near-black base instead. (Verified in QA.)
   -------------------------------------------------------------------------- */
.section--dark {
  --bg: var(--c-base);
  --fg: var(--c-on-dark);
  --heading: var(--c-warm-white);
  --accent: var(--c-brass);
  --line: var(--c-line-dark);
}
.section--darker {
  --bg: var(--c-base-deep);
  --fg: var(--c-on-dark);
  --heading: var(--c-warm-white);
  --accent: var(--c-brass);
  --line: var(--c-line-dark);
}
.section--warm {
  --bg: var(--c-warm-white);
  --fg: var(--c-base);            /* near-black body — passes AA on warm-white */
  --heading: var(--c-base);
  --accent: var(--c-brass-deep);  /* darker brass for contrast on light */
  --line: var(--c-line-light);
}
.section--offwhite {
  --bg: var(--c-off-white);
  --fg: var(--c-muted);
  --heading: var(--c-base);
  --accent: var(--c-brass-deep);
  --line: var(--c-line-light);
}
.section--white {
  --bg: var(--c-white);
  --fg: var(--c-muted);
  --heading: var(--c-base);
  --accent: var(--c-brass-deep);
  --line: var(--c-line-light);
}

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */
/* Screen-reader-only (visually hidden, still announced) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Skip link — first focusable element on the page */
.skip-link {
  position: fixed;
  top: var(--sp-2); left: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-brass);
  color: var(--c-base);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.mt-0 { margin-top: 0; }
.full-bleed-divider { height: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------------------
   7. RESPONSIVE — grids open up, container scales on large screens
   -------------------------------------------------------------------------- */

/* xs 480px — 2-up grids where requested */
@media (min-width: 30rem) {
  .grid--2\@xs { --cols: 2; }
}

/* sm 640px */
@media (min-width: 40rem) {
  .grid--2\@sm { --cols: 2; }
}

/* md 768px */
@media (min-width: 48rem) {
  .grid--2\@md { --cols: 2; }
  .grid--3\@md { --cols: 3; }
}

/* lg 1024px — primary desktop grids */
@media (min-width: 64rem) {
  .grid--3\@lg { --cols: 3; }
  .grid--4\@lg { --cols: 4; }
  .grid--2\@lg { --cols: 2; }
}

/* 2xl 1440px — step up container + section rhythm so content isn't cramped */
@media (min-width: 90rem) {
  :root {
    --maxw: 82rem;
    --section-y: clamp(6rem, 4rem + 4vw, 9rem);
  }
}

/* 3xl 2560px — QHD/ultrawide: widen container, lift type ceiling, keep centered */
@media (min-width: 160rem) {
  :root {
    --maxw: 104rem;
    --gutter: 4rem;
    --fs-h1: clamp(4.5rem, 3rem + 3vw, 6rem);
    --fs-display: clamp(6rem, 4rem + 3vw, 8rem);
    --section-y: 10rem;
  }
  body { font-size: 1.25rem; }
}

/* 4xl 3840px — 4K: cap content width and re-center to avoid tiny-content look */
@media (min-width: 240rem) {
  :root {
    --maxw: 124rem;
    --gutter: 6rem;
    --section-y: 13rem;
  }
  body { font-size: 1.5rem; }
}