/* ════════════════════════════════════════════════════════════════════
   HILLAND — Design Tokens v3 · Phase 3 content platform
   Extends the production index.html token set (the source of truth in
   Reference/hilland-site-live/). No new brand HUES are introduced — every
   value here is either locked, a tint/shade of a locked colour, or a
   Foundation-Guide finish neutral. Structure: primitives → semantic
   aliases → scales. Track 5 should self-host Archivo and bind components
   to the SEMANTIC tokens, not the raw palette.
   Decisions: see BRIEF_v3_DECISIONS.md (D0–D9).
   ════════════════════════════════════════════════════════════════════ */

/* Archivo — adopted per D8 (reopens v3 §7). Track 5: self-host + subset. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root {
  /* ── 1 · PALETTE PRIMITIVES (locked — production index.html) ───────── */
  --charcoal:   #2A2724;   /* Pantone 419 C  · primary bg */
  --amber:      #C9622A;   /* Pantone 7516 C · single accent */
  --offwhite:   #F5F2EE;   /* Pantone 9162 C · reading bg */
  --secondary:  #64605C;   /* body/secondary text on light */
  --pale:       #B0ACA8;   /* tertiary text, taglines */
  --divider:    #3E3B37;   /* borders/dividers on charcoal */

  /* ── 2 · DERIVED NEUTRALS (tints/shades of the above — not new hues) ─ */
  --charcoal-raised: #322E2A;  /* raised card on charcoal */
  --hairline-dark:   #4A4641;  /* chip/pill edge on charcoal */
  --offwhite-shade:  #F0EDE8;  /* zebra rows, quiet fills (brief §3.2) */
  --offwhite-line:   #E4DFD8;  /* hairline on off-white */
  --grid-line:       #D9D3CB;  /* chart gridlines on off-white */
  --amber-hover:     #B4541F;  /* deeper amber — hover/active only */

  /* ── 3 · FINISH-BAND PILLAR NEUTRALS (Foundation Guide · D7 move 4) ── */
  --f-bright:    #B0B4BA;   /* Framing Nails */
  --f-galv:      #8A9278;   /* Batten + Decking */
  --f-hdg:       #6E7472;   /* Hoop Iron + Bracing */
  --f-stainless: #A8B0BF;   /* Plaster Fasteners */
  /* AS Standards + Compliance pillar uses --amber (the through-line) */

  /* ── 4 · SEMANTIC ALIASES (bind components to THESE) ───────────────── */
  --bg:          var(--charcoal);
  --bg-raised:   var(--charcoal-raised);
  --bg-light:    var(--offwhite);
  --bg-shade:    var(--offwhite-shade);
  --text:        var(--offwhite);     /* on dark */
  --text-strong: var(--charcoal);     /* on light */
  --text-muted:  var(--secondary);    /* readable metadata on light */
  --text-faint:  var(--pale);         /* decorative / large only */
  --accent:      var(--amber);
  --accent-hover:var(--amber-hover);
  --border:      var(--divider);
  --border-light:var(--offwhite-line);
  --edge-dark:   var(--hairline-dark);
  --focus:       var(--amber);

  /* ── 5 · TYPE ──────────────────────────────────────────────────────── */
  --font-display: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Cascadia Mono', ui-monospace, monospace;
  --font-wordmark: -apple-system, 'Helvetica Neue', Arial, sans-serif; /* logo stays system (D8) */

  /* responsive scale (clamp) */
  --fs-display: clamp(2.4rem, 6vw, 4.2rem);
  --fs-h1:      clamp(1.9rem, 4.5vw, 3rem);
  --fs-h2:      clamp(1.5rem, 3.4vw, 2.1rem);
  --fs-h3:      clamp(1.2rem, 2.2vw, 1.45rem);
  --fs-body:    clamp(1rem, 1.4vw, 1.12rem);
  --fs-small:   0.85rem;
  --fs-eyebrow: 0.65rem;
  --fs-label:   0.62rem;

  --lh-tight: 1.1;   --lh-head: 1.15;   --lh-body: 1.75;

  /* tracking ladder (verbatim from source) */
  --ls-wordmark: 0.045em;
  --ls-pill:     0.13em;
  --ls-label:    0.18em;
  --ls-eyebrow:  0.22em;
  --ls-tagline:  0.3em;

  /* ── 6 · SPACING (8-based) ─────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ── 7 · RADIUS ────────────────────────────────────────────────────── */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  /* ── 8 · ELEVATION (warm shadows, never pure black on light) ───────── */
  --shadow-1: 0 2px 8px rgba(42,39,36,0.06);
  --shadow-2: 0 10px 30px rgba(42,39,36,0.12);
  --shadow-dark: 0 14px 40px rgba(0,0,0,0.35);

  /* ── 9 · MOTION ────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 160ms;
  --dur-slow: 350ms;

  /* ── 10 · LAYOUT ───────────────────────────────────────────────────── */
  --measure: 680px;     /* long-form reading width (matches trade section) */
  --container: 1080px;  /* page max width */
}

/* ── Focus ring — WCAG 2.4.7 (amber passes 3:1 non-text on both bg) ──── */
:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Level-line motif helpers (D7 move 1) ─────────────────────────────── */
.level-rule { height:2px; background:var(--accent); border-radius:1px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:var(--s3);
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
}
.eyebrow::before {           /* lead-rule replaces amber small-text on dark (D4) */
  content:""; height:2px; width:24px; background:var(--accent); border-radius:1px; flex-shrink:0;
}

/* ── Canonical a11y text / link patterns (locked — D4 + home_v3 audit) ──
   RULE: amber NEVER fills readable text below ~24px. Verified ratios:
     amber on charcoal     3.7:1  · amber on raised  3.4:1  · amber on offwhite 3.6:1  → all FAIL AA
     pale  on charcoal     6.6:1  · pale  on raised   6.0:1                              → PASS (muted text on DARK)
     secondary on charcoal 2.4:1                                                         → FAIL (light-bg only)
   So: muted text on DARK = --text-faint; --text-muted (secondary) is LIGHT-bg only.
   Inline links = currentColor text + amber underline, never amber fill. */
.link-amber { color:currentColor; text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:2px; text-underline-offset:3px;
  transition:text-decoration-thickness var(--dur) var(--ease); }
.link-amber:hover { text-decoration-thickness:3px; }
/* spec-voice micro-label: pale text + decorative amber marker (accessible) */
.spec-tag { font-family:var(--font-mono); color:var(--text-faint); letter-spacing:0.04em; }
.spec-tag::before { content:"// "; color:var(--accent); }
/* contact/footer labels & headings on dark → muted = --text-faint, never secondary */

/* ── Reduced-motion respect ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
}