/* ==========================================================================
   DESIGN TOKENS — edit this file to re-skin the template for a new client.
   Nothing else in the CSS should contain raw colours or font names.
   ========================================================================== */

:root {
  /* ----- Palette (plumber demo: navy trust + safety orange) ----- */
  --c-brand:      #0E3A5D;  /* primary brand — headers, links, footer */
  --c-brand-dark: #14212B;  /* hero background, darkest surfaces */
  --c-accent:     #E8642C;  /* CTAs and click-to-call ONLY — keep it scarce */
  --c-accent-dark:#C74E1C;  /* accent hover */
  --c-paper:      #F6F4EF;  /* page background (warm off-white, not #fff) */
  --c-card:       #FFFFFF;  /* card surfaces */
  --c-ink:        #1C2830;  /* body text on light */
  --c-steel:      #5A6B78;  /* muted text, captions */
  --c-line:       #DDD8CE;  /* hairline borders */
  --c-on-dark:    #F2EFE8;  /* text on dark surfaces */
  --c-star:       #E9A13B;  /* review stars */

  /* ----- Imagery ----- */
  /* Hero background photo. Demo uses a free Unsplash photo hotlinked by URL;
     for a real client, drop their photo in img/ and point this at it. */
  --hero-photo: url("https://images.unsplash.com/photo-1585704032915-c3400ca199e7?auto=format&fit=crop&w=1800&q=70");

  /* ----- Typography ----- */
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;

  /* Fluid type scale (mobile → desktop) */
  --fs-hero: clamp(2.1rem, 6.5vw + 0.5rem, 3.9rem);
  --fs-1: clamp(1.7rem, 3.5vw + 0.6rem, 2.5rem);   /* section headings */
  --fs-2: clamp(1.25rem, 1.5vw + 0.8rem, 1.5rem);  /* card headings */
  --fs-3: 1.125rem;                                 /* lead paragraphs */
  --fs-4: 1rem;                                     /* body */
  --fs-5: 0.875rem;                                 /* meta, captions */

  /* ----- Spacing / shape ----- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-section: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 6px rgba(20, 33, 43, 0.08), 0 12px 28px rgba(20, 33, 43, 0.07);
  --maxw: 72rem;
}