/* ==========================================================================
   Clearly Windows Murfreesboro — Design Tokens
   Palette sampled directly from Shawn's logo artwork.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  /* Sampled from the polo + glove in logo_with_tagline.png */
  --blue:            #0032A5;
  --blue-600:        #002A8C;
  --blue-700:        #002478;
  --blue-050:        #EEF3FF;
  --blue-100:        #DCE6FF;
  --blue-200:        #BDD0FF;

  /* Deep navy from the tagline banner — used for dark sections */
  --navy:            #071634;
  --navy-800:        #0D2144;
  --navy-700:        #16305C;

  /* Warm neutral. This is the differentiator: it keeps the site from
     reading like another cold blue-grey local-service template, and it
     harmonises with the copper tones in the mascot's tattoos. */
  --sand:            #F7F3EA;
  --sand-200:        #EFE8D9;
  --sand-300:        #E2D8C3;

  /* Copper accent, from the tattoo linework. Use sparingly: rating stars,
     small underlines, numeric emphasis. Never for large fills. */
  --copper:          #B4682F;
  --copper-soft:     #D89A63;

  --black:           #0A0A0A;   /* the wordmark black */

  /* ---- Text ----------------------------------------------------------- */
  --ink:             #14161A;
  --ink-soft:        #545C6B;
  --ink-faint:       #8A93A3;
  --on-dark:         #FFFFFF;
  --on-dark-soft:    rgba(255, 255, 255, 0.72);
  --on-dark-faint:   rgba(255, 255, 255, 0.48);

  /* ---- Surfaces ------------------------------------------------------- */
  --surface:         #FFFFFF;
  --surface-alt:     #FBFCFE;
  --hairline:        rgba(10, 10, 10, 0.09);
  --hairline-soft:   rgba(10, 10, 10, 0.055);
  --hairline-dark:   rgba(255, 255, 255, 0.14);

  /* ---- Semantic ------------------------------------------------------- */
  --success:         #147A4B;
  --success-600:     #0F6540;

  /* ---- Type ----------------------------------------------------------- */
  /* Anton is reserved for the wordmark and large numerals only — it is the
     logo's voice, so letting it run across every heading flattens the brand.
     Archivo carries headings and body: sturdy, industrious, highly legible. */
  --font-display:    'Anton', 'Arial Narrow', sans-serif;
  --font-sans:       'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid scale, mobile → desktop */
  --text-xs:         0.75rem;
  --text-sm:         0.8125rem;
  --text-base:       0.9375rem;
  --text-md:         1rem;
  --text-lg:         clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --text-xl:         clamp(1.25rem, 0.7vw + 1.1rem, 1.5rem);
  --text-2xl:        clamp(1.5rem, 1.3vw + 1.2rem, 2rem);
  --text-3xl:        clamp(1.875rem, 2.2vw + 1.35rem, 2.75rem);
  --text-4xl:        clamp(2.25rem, 3.4vw + 1.5rem, 3.5rem);
  --text-hero:       clamp(2.375rem, 3.6vw + 1.35rem, 3.75rem);

  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.55;
  --leading-relaxed: 1.68;

  --track-tight:     -0.022em;
  --track-snug:      -0.014em;
  --track-wide:      0.08em;
  --track-caps:      0.13em;

  /* ---- Space (4px base) ----------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Section rhythm — fluid so mobile doesn't get cavernous gaps */
  --section-y:       clamp(3.5rem, 6vw, 6.5rem);
  --section-y-lg:    clamp(4.5rem, 8vw, 8.5rem);

  /* ---- Radius --------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  30px;
  --r-full: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-xs:  0 1px 2px rgba(7, 22, 52, 0.06);
  --shadow-sm:  0 2px 6px rgba(7, 22, 52, 0.07), 0 1px 2px rgba(7, 22, 52, 0.04);
  --shadow-md:  0 8px 22px rgba(7, 22, 52, 0.09), 0 2px 6px rgba(7, 22, 52, 0.05);
  --shadow-lg:  0 18px 44px rgba(7, 22, 52, 0.12), 0 4px 12px rgba(7, 22, 52, 0.06);
  --shadow-xl:  0 32px 72px rgba(7, 22, 52, 0.16), 0 8px 20px rgba(7, 22, 52, 0.07);
  --shadow-blue: 0 14px 32px rgba(0, 50, 165, 0.26);

  /* ---- Layout --------------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1340px;
  --container-text: 720px;
  --gutter:         clamp(1.125rem, 4vw, 2.5rem);

  /* ---- Motion --------------------------------------------------------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur:       220ms;
  --dur-slow:  420ms;

  --header-h: 76px;
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
}