/* ============================================================
   Fix-A-Leak Plumbing & Heating — Design Tokens
   The single design spec. The /forge-html-convert step maps THIS
   into the ACSS dashboard + Bricks Theme Styles. Keep it clean.

   Palette pulled from the Figma comp (mov93aYyIBBRfper0otViE):
   navy + sky-blue + safety-yellow, gorilla mascot brand.
   Type scale authored as fluid clamp() in PX (ledger C1 — sidesteps
   the ACSS 62.5% rem trap G3).
   ============================================================ */
:root {
  /* ---- Brand color ---- */
  --navy:        #16265E;   /* primary dark — headings, dark sections, footer */
  --navy-900:    #0F1C47;   /* mascot outline / deepest */
  --navy-700:    #1E327A;   /* navy gradient top */
  --sky:         #29A9E0;   /* brand accent — eyebrows, links, icons */
  --sky-600:     #1E8FC4;   /* sky hover */
  --sky-100:     #E7F4FB;   /* light sky wash / chips */
  --sky-50:      #F2F9FD;
  --yellow:      #FFC20E;   /* CTA / safety yellow */
  --yellow-600:  #ECAC00;   /* yellow hover */
  --yellow-200:  #FFE9A6;

  --ink:         #15203A;   /* body heading text on light */
  --body:        #51607A;   /* paragraph text */
  --muted:       #8A97AD;   /* small print */
  --line:        #E2E8F2;   /* hairlines / borders */
  --white:       #FFFFFF;
  --cream:       #F6F9FC;   /* off-white section bg */
  --card:        #FFFFFF;

  --success:     #1FAE6B;
  --danger:      #E0533D;

  /* ---- Semantic ---- */
  --bg:          var(--white);
  --text:        var(--body);
  --heading:     var(--navy);
  --link:        var(--sky-600);

  /* ---- Typography ----
     Display = Anton (heavy condensed, matches the comp's punchy headlines).
     Head = Montserrat (card titles, eyebrows, labels). Body = Inter. */
  --font-display: "Anton", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* fluid type scale (px clamp) */
  --fs-eyebrow: 0.8125rem;                                  /* 13px */
  --fs-small:   0.875rem;                                   /* 14px */
  --fs-base:    clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);   /* 16-17 */
  --fs-lg:      clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);  /* 18-20 */
  --fs-h4:      clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);  /* 18-22 */
  --fs-h3:      clamp(1.4rem, 1.2rem + 1vw, 1.875rem);      /* 22-30 */
  --fs-h2:      clamp(1.9rem, 1.5rem + 2vw, 3rem);          /* 30-48 */
  --fs-h1:      clamp(2.4rem, 1.8rem + 3.2vw, 4.25rem);     /* 38-68 */
  --fs-hero:    clamp(2.6rem, 1.9rem + 3.8vw, 4.75rem);     /* hero headline */

  --lh-tight: 1.04;
  --lh-head:  1.12;
  --lh-body:  1.65;

  /* ---- Spacing scale ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.1rem, 0.6rem + 2.2vw, 2.5rem);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Shadow (cool navy-tinted, not grey) ---- */
  --sh-sm: 0 2px 6px rgba(22,38,94,0.07);
  --sh:    0 10px 30px rgba(22,38,94,0.10);
  --sh-lg: 0 24px 60px rgba(22,38,94,0.16);
  --sh-yellow: 0 12px 26px rgba(255,194,14,0.36);
  --sh-sky:    0 12px 26px rgba(41,169,224,0.30);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .45s;

  /* ---- Gradients ---- */
  --grad-navy: linear-gradient(150deg, #1E327A 0%, #16265E 55%, #0F1C47 100%);
  --grad-sky:  linear-gradient(135deg, #45B6E8 0%, #29A9E0 100%);
}