/* =========================================================================
   THE HARDWOOD GUYS — DESIGN TOKENS
   Source of truth: /Users/davidbrannan/THG Website/BRIEF.md, palette
   corrected per David's review — the brand blue/red/gold/wood must match
   the actual logo file, not an approximated palette. Every raw hex below
   was independently re-sampled (Python + Pillow, pixel-region sampling)
   from the logo at ~/Downloads/THG Logo Home Services - Edited (1).png,
   and every contrast ratio was independently recomputed with the WCAG
   relative-luminance formula — see README.md for the full verification.

   RULE: components.css must reference ONLY the "SEMANTIC LAYER" tokens
   below, never the raw palette tokens directly. Retoning the brand is then
   a one-file edit: change the raw values in section 1, everything downstream
   updates automatically. (This is exactly what just happened: the whole
   system moved from an approximated slate/red to the logo-accurate
   navy/red/blue/gold/wood palette by editing only this section.)
   ========================================================================= */

:root {

  /* ---------------------------------------------------------------------
     1. RAW PALETTE — sampled from the logo, WCAG-verified.
     --------------------------------------------------------------------- */
  --red:        #E00410; /* white text on --red        = 5.01:1 (AA)  — sampled from the "HARDWOOD" wordmark (#E30613 measured) */
  --red-hover:  #C7040E; /* white text on --red-hover   = 6.08:1 (AA)  — hover DARKENS, never lightens */
  --navy:       #282C48; /* white text on --navy        = 13.60:1 (AAA) — sampled from the "Guys" script fill (#282E4A measured, near-exact) */
  --blue:       #0070B3; /* --blue on white              = 5.29:1 (AA)  — sampled from the "Guys" outline / left figure's shirt (#007FC7 measured); darkened 0.5% from raw to clear AA */
  --gold:       #F8B800; /* --navy on --gold             = 7.67:1 (AAA) — sampled from the cap highlight (#FCBE00 measured) */
  --wood:       #5C3410; /* white text on --wood         = 10.75:1 (AAA) — sampled from the timber plank (#5C3412 measured, near-exact) */
  --ink:        #313131; /* --ink on white               = 13.01:1 (AAA) — unchanged */
  --ink-muted:  #6B6B6B; /* --ink-muted on white         = 5.33:1  (AA)  · on --off-white = 4.93:1 (AA) — unchanged */
  --off-white:  #F6F6F6; /* --red on --off-white         = 4.63:1  (AA)  — unchanged */
  --border:     #C8C8C8; /* on white = 1.67:1 — DECORATIVE ONLY, never text, never a sole UI-state indicator — unchanged */
  --white:      #FFFFFF;

  /* Neutral UI utility — NOT a brand color, used only for drop-shadows and
     the hero photo scrim, where a true near-black reads better than a
     tinted one. Never used for text or headings (that's --navy now). */
  --near-black: #0D0D0D;
  --near-black-rgb: 13, 13, 13;
  --red-rgb: 224, 4, 16;
  --navy-rgb: 40, 44, 72;

  /* KNOWN CONTRAST TRAPS — documented so nobody "fixes" these by accident.
     red on --navy        = 2.72:1  (fails, effectively unreadable)
     red on --ink         = 2.60:1  (fails)
     blue on --navy       = 2.57:1  (fails)
     ink-muted on --navy  = 2.55:1  (fails)
     red on --gold        = 2.82:1  (fails)
     gold on white        = 1.77:1  (fails — gold is a highlight fill, never body text on white, never white text on gold)
     #8F8F8F "muted gray" = 3.23:1 (fails) — banned, use --ink-muted instead
     Consequence: on dark (--navy) backgrounds, hover states use
     text-decoration: underline, never a color swap to red OR blue. See
     --color-nav-link-hover below. Gold is only ever paired with --navy
     text/icons (7.67:1 either direction) — never with white or red. */


  /* ---------------------------------------------------------------------
     2. SEMANTIC LAYER — the only tokens components.css may reference.
     Each line documents the raw token it maps to and the resulting
     contrast ratio in context. Ratios independently recomputed with the
     WCAG relative-luminance formula for this build; see README.md.
     --------------------------------------------------------------------- */

  /* Backgrounds */
  --color-bg-page:        var(--white);      /* page canvas */
  --color-bg-page-alt:    var(--off-white);  /* alternating section bg */
  --color-bg-header:      var(--navy);       /* header bar */
  --color-bg-footer:      var(--navy);       /* footer */
  --color-bg-card:        var(--white);      /* cards on page bg */
  --color-bg-card-alt:    var(--white);      /* cards on --off-white sections (kept white for lift) */
  --color-bg-input:       var(--white);
  --color-bg-input-disabled: var(--off-white);
  --color-bg-overlay:     rgba(var(--near-black-rgb), 0.55); /* hero photo scrim, mobile nav backdrop — neutral black, not brand-tinted, so photos read naturally */
  --color-bg-badge:       var(--off-white);
  --color-bg-success:     var(--off-white);  /* success panel */
  --color-bg-error:       var(--off-white);  /* error panel background (text/border carry the meaning, never color alone) */
  --color-bg-accent-wood: var(--wood);       /* optional single accent band, used sparingly per brand direction */

  /* Text */
  --color-text-body:      var(--ink);        /* ink on white = 13.01:1 AAA · on off-white = 12.04:1 AAA */
  --color-text-heading:   var(--navy);       /* navy on white = 13.60:1 AAA · on off-white = 12.58:1 AAA — H1/H2/H3, replaces slate everywhere per brand correction */
  --color-text-display:   var(--navy);       /* same as heading — navy now covers hero/display type too (13.60:1 AAA comfortably exceeds AA on any light bg) */
  --color-text-muted:     var(--ink-muted);  /* on white = 5.33:1 AA · on off-white = 4.93:1 AA — captions, meta, helper text */
  --color-text-inverse:   var(--white);      /* white on --navy = 13.60:1 AAA — all text on header/footer/dark hero scrim */
  --color-text-link:      var(--blue);       /* blue on white = 5.29:1 AA · on off-white = 4.90:1 AA — short link text, never long body copy (brand direction) */
  --color-text-link-hover: var(--red-hover); /* red-hover on white = 6.08:1 AA · on off-white = 5.63:1 AA — safe ONLY on light backgrounds */
  --color-text-error:     var(--red);        /* red on off-white = 4.63:1 AA · on white = 5.01:1 AA */
  --color-text-success:   var(--ink);        /* no verified green in brand palette — success communicated via icon + ink text, never color alone */
  --color-text-price:     var(--ink);        /* tabular numerals, see type scale below */
  --color-rating-star:    var(--gold);       /* navy on gold = 7.67:1 AAA context; used as a fill color for star icons, decorative only, paired with visible numeric/text rating info, never gold text on white */

  /* Navigation (on --color-bg-header / --color-bg-footer, i.e. on --navy) */
  --color-nav-link:        var(--white);     /* white on navy = 13.60:1 AAA */
  --color-nav-link-hover:  var(--white);     /* NO color swap on dark bg (red on navy = 2.72:1, blue on navy = 2.57:1 — both fail) — hover = underline only, see components.css */

  /* CTA / Buttons */
  --color-cta-bg:              var(--red);       /* white text on it = 5.01:1 AA */
  --color-cta-bg-hover:        var(--red-hover); /* DARKENS — white text on it = 6.08:1 AA */
  --color-cta-text:            var(--white);
  --color-cta-bg-disabled:     var(--border);
  --color-cta-text-disabled:   var(--ink-muted);

  --color-btn-secondary-bg:          var(--white);
  --color-btn-secondary-text:        var(--navy);  /* 13.60:1 AAA */
  --color-btn-secondary-border:      var(--navy);
  --color-btn-secondary-hover-bg:    var(--navy);
  --color-btn-secondary-hover-text:  var(--white);  /* 13.60:1 AAA */

  /* Outline button used ON TOP OF the hero photo scrim (dark) */
  --color-btn-outline-border:       var(--white);
  --color-btn-outline-text:         var(--white);   /* white on scrim(near-black .55) exceeds white-on-navy's 13.60:1 baseline */
  --color-btn-outline-hover-bg:     var(--white);
  --color-btn-outline-hover-text:   var(--navy);     /* 13.60:1 AAA */

  /* Borders */
  --color-border-default:   var(--border);    /* decorative dividers, card outlines — NEVER the only cue for an interactive boundary */
  --color-border-input:     var(--ink-muted); /* 5.33:1 on white — meets 3:1 non-text contrast for form-field boundaries; --border alone (1.67:1) would not */
  --color-border-input-focus: var(--blue);    /* paired with a 3px solid focus outline, not border-color alone */
  --color-border-input-error: var(--red);

  /* Focus ring (WCAG 2.2 focus-visible) — solid outline, never box-shadow-only glow.
     Blue (not red) so a focus indicator is never confused with an error
     indicator — both are now visually distinct colors. */
  --color-focus-ring:          var(--blue);  /* for use on --color-bg-page / --color-bg-page-alt: 5.29:1 / 4.90:1 — both clear the 3:1 non-text minimum with room to spare */
  --color-focus-ring-inverse:  var(--white); /* for use inside header/footer/hero-on-photo where blue (2.57:1 on navy) and red (2.72:1 on navy) both fail */

  /* Badges / chips (proof row, review badge) */
  --color-badge-bg:      var(--off-white);
  --color-badge-text:    var(--navy);   /* 12.58:1 AAA on off-white */
  --color-badge-border:  var(--border);

  /* Financing / info strip */
  --color-strip-bg:    var(--off-white);
  --color-strip-text:  var(--ink);       /* 12.04:1 AAA */
  --color-strip-accent: var(--blue);     /* 4.90:1 AA on off-white — accent only (icon), not run of text; red is reserved for CTAs only */

  /* Process-step accent — wood tone, used sparingly per brand direction
     ("one dark section band if a page needs rhythm"); here as the
     top-border accent on the 3-step process strip, since red is reserved
     exclusively for clickable calls to action. */
  --color-accent-wood: var(--wood);


  /* ---------------------------------------------------------------------
     3. TYPE SCALE — Playfair Display (headings) / Inter (body).
     No CDN font links anywhere in this project (zero external requests).
     Until brand font files are self-hosted, the stacks below resolve to
     the named system fallbacks — see README.md "Open Questions".
     --------------------------------------------------------------------- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --text-xs:   0.8125rem; /* 13px — fine print, disclaimer */
  --text-sm:   0.9375rem; /* 15px — captions, meta */
  --text-base: 1.0625rem; /* 17px — body copy, per brief (17px/1.6) */
  --text-md:   1.25rem;   /* 20px — lead paragraph, card titles */
  --text-lg:   1.5rem;    /* 24px — H3 */
  --text-xl:   1.875rem;  /* 30px — H2 */
  --text-2xl:  2.25rem;   /* 36px — section H2 (large) */
  --text-3xl:  2.75rem;   /* 44px — H1 (tablet+) */
  --text-4xl:  clamp(2.25rem, 5vw + 1rem, 3.5rem); /* 36px → 56px — hero H1, fluid */

  --leading-tight:  1.15; /* headings */
  --leading-snug:   1.35;
  --leading-normal: 1.6;  /* body copy, per brief */
  --leading-relaxed: 1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight: -0.01em; /* large display headings */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;   /* small caps / eyebrow labels */


  /* ---------------------------------------------------------------------
     4. SPACING — 4px base scale.
     --------------------------------------------------------------------- */
  --space-1:  0.25rem; /* 4px */
  --space-2:  0.5rem;  /* 8px */
  --space-3:  0.75rem; /* 12px */
  --space-4:  1rem;    /* 16px */
  --space-5:  1.25rem; /* 20px */
  --space-6:  1.5rem;  /* 24px */
  --space-7:  1.75rem; /* 28px */
  --space-8:  2rem;    /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */

  /* Minimum touch target, WCAG 2.2 Target Size (Minimum) 2.5.8 */
  --touch-target-min: 44px;


  /* ---------------------------------------------------------------------
     5. RADIUS — 8px base.
     --------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-lg:   16px;
  --radius-full: 999px;


  /* ---------------------------------------------------------------------
     6. SHADOWS — elevation only; never the sole indicator of interactivity.
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(var(--near-black-rgb), 0.08);
  --shadow-md: 0 4px 12px rgba(var(--near-black-rgb), 0.12);
  --shadow-lg: 0 12px 32px rgba(var(--near-black-rgb), 0.18);
  --shadow-header: 0 2px 8px rgba(var(--near-black-rgb), 0.12);
  --shadow-bottom-bar: 0 -2px 10px rgba(var(--near-black-rgb), 0.14);


  /* ---------------------------------------------------------------------
     7. MOTION — respects prefers-reduced-motion centrally.
     --------------------------------------------------------------------- */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------------------------------------------------------------------
     8. Z-INDEX SCALE
     --------------------------------------------------------------------- */
  --z-header: 100;
  --z-bottom-bar: 150;
  --z-mobile-nav: 200;
  --z-skip-link: 300;

  /* ---------------------------------------------------------------------
     9. LAYOUT
     --------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 16px; /* mobile — overridden below at tablet/desktop */

  /* ---------------------------------------------------------------------
     10. BREAKPOINTS (reference only)
     CSS custom properties cannot be substituted inside an @media
     condition in vanilla CSS (no build step / no PostCSS in this
     project), so these exist for documentation and for JS (matchMedia)
     to read via a data attribute. Every @media rule in components.css
     uses the literal px value shown here — keep them in sync by hand.
     --------------------------------------------------------------------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Responsive container padding: 16px mobile / 24px tablet / 40px desktop,
   per BRIEF layout spec. */
@media (min-width: 768px) {
  :root { --container-pad: 24px; }
}
@media (min-width: 1024px) {
  :root { --container-pad: 40px; }
}

/* Centralized reduced-motion handling: zero every duration token so any
   component using var(--motion-*) automatically stops animating. JS-driven
   motion (the before/after slider) additionally checks
   matchMedia('(prefers-reduced-motion: reduce)') directly — see
   components.html inline script. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}