/* The Flooring Guys — design tokens.
   Layer 1: raw palette, sampled from the real logo (see BRAND.md for
   provenance and the full recomputed contrast table).
   Layer 2: semantic tokens. components.css references ONLY layer 2.
   This is The Flooring Guys (FL, teal/navy/wood) — not The Hardwood Guys
   (GA, red/navy/gold). Do not import values between the two systems. */

:root {
  /* ---- raw palette ---- */
  --teal:        #066672;  /* "FLOORING" wordmark  */
  --teal-hover:  #055561;
  --navy:        #2A2A4E;  /* "Guys" script fill   */
  --blue:        #0069A8;  /* script outline blue, darkened for AA on white */
  --wood:        #663612;  /* timber plank         */
  --steel:       #666666;  /* diamond-plate badge  */
  --ink:         #313131;
  --ink-muted:   #5F6368;
  --off-white:   #F5F7F7;
  --border-gray: #C9CFD1;
  --white:       #FFFFFF;
  --near-black:  #1C1C22;

  /* ---- semantic: surfaces ---- */
  --color-bg-page:        var(--white);
  --color-bg-alt:         var(--off-white);
  --color-bg-header:      var(--navy);
  --color-bg-footer:      var(--navy);
  --color-bg-band:        var(--teal);      /* full-bleed CTA band */
  --color-bg-accent-rule: var(--wood);      /* decorative top borders */

  /* ---- semantic: text ---- */
  --color-text-body:      var(--ink);
  --color-text-muted:     var(--ink-muted);
  --color-text-heading:   var(--navy);
  --color-text-accent:    var(--teal);
  --color-text-inverse:   var(--white);     /* the ONLY text color on navy/teal/photo */
  --color-text-link:      var(--blue);
  --color-text-link-hover: var(--teal-hover);

  /* ---- semantic: interactive ---- */
  --color-cta-bg:         var(--teal);
  --color-cta-bg-hover:   var(--teal-hover);
  --color-cta-text:       var(--white);
  --color-nav-link:       var(--white);
  --color-focus-ring:     var(--blue);
  --color-focus-ring-inverse: var(--white); /* on navy/teal/photo backgrounds */

  /* ---- semantic: lines & form ---- */
  --color-border:         var(--border-gray);   /* decorative ONLY (1.7:1) */
  --color-border-input:   var(--ink-muted);     /* 6.05:1 — passes 3:1 UI contrast */
  --color-error:          #B3261E;

  /* ---- type ---- */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;   --fs-xl: 1.5625rem; --fs-2xl: 1.9375rem;
  --fs-3xl: 2.4375rem; --fs-hero: clamp(1.9rem, 4.5vw, 3rem);
  --lh-tight: 1.15; --lh-body: 1.6;

  /* ---- space / radius / shadow / motion ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4.5rem;
  --radius: 8px; --radius-sm: 4px;
  --shadow-card: 0 1px 3px rgba(28,28,34,.10), 0 4px 14px rgba(28,28,34,.08);
  --shadow-raised: 0 6px 24px rgba(28,28,34,.16);
  --motion-fast: 140ms; --motion-med: 240ms;
  --touch-target-min: 44px;
  --container: 1160px;
  --z-header: 100; --z-mobile-bar: 90; --z-nav-panel: 110;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-med: 0ms; }
}