/* ==========================================================================
   Pipe Patrol — Design Tokens (single source of truth)
   Change a value here → the whole site changes. Sampled from the logo.
   ========================================================================== */
:root {
  /* ---- Brand color ---- */
  --pp-navy:        #172A3A;   /* primary brand / dark sections / headings */
  --pp-navy-deep:   #0F1C27;   /* darkest — footer, overlays */
  --pp-navy-600:    #2B4A63;   /* lighter navy — hover, secondary surface */
  --pp-red:         #C4392B;   /* accent / primary CTA / urgent */
  --pp-red-dark:    #9E2B20;   /* CTA hover / pressed */
  --pp-steel:       #4B6B82;   /* links / cool water-pipe accent */

  /* ---- Neutrals ---- */
  --pp-white:       #FFFFFF;
  --pp-off:         #F5F7F9;   /* alt section bg (cool off-white) */
  --pp-off-2:       #EAEEF2;   /* deeper alt bg */
  --pp-line:        #DCE2E8;   /* borders / dividers */
  --pp-slate:       #5A6B79;   /* muted / secondary text */
  --pp-ink:         #17222C;   /* body text */

  /* ---- Semantic ---- */
  --pp-bg:          var(--pp-white);
  --pp-text:        var(--pp-ink);
  --pp-heading:     var(--pp-navy);
  --pp-primary:     var(--pp-red);
  --pp-primary-ink: var(--pp-white);
  --pp-link:        var(--pp-steel);
  --pp-on-navy:     #EAF1F6;   /* text on navy */

  /* ---- Typography ---- */
  --pp-font-display: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pp-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pp-fw-body: 400; --pp-fw-med: 500; --pp-fw-semi: 600; --pp-fw-bold: 700; --pp-fw-black: 800;

  /* Fluid type scale (mobile → desktop) */
  --pp-h1: clamp(2rem, 5vw + 1rem, 3.25rem);
  --pp-h2: clamp(1.5rem, 3vw + 0.75rem, 2.25rem);
  --pp-h3: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
  --pp-h4: clamp(1.075rem, 1vw + 0.6rem, 1.25rem);
  --pp-body: 1.0625rem;
  --pp-small: 0.9375rem;
  --pp-eyebrow: 0.8125rem;
  --pp-lh-tight: 1.12;
  --pp-lh-body: 1.6;
  --pp-tracking-eyebrow: 0.12em;

  /* ---- Spacing (8px scale) ---- */
  --pp-1: 0.25rem; --pp-2: 0.5rem; --pp-3: 0.75rem; --pp-4: 1rem;
  --pp-5: 1.5rem; --pp-6: 2rem; --pp-7: 3rem; --pp-8: 4rem; --pp-9: 6rem;
  --pp-section-y: clamp(3rem, 6vw, 6rem);   /* vertical rhythm of a section */

  /* ---- Layout ---- */
  --pp-container: 1200px;
  --pp-container-text: 68ch;
  --pp-gutter: clamp(1rem, 4vw, 2rem);

  /* ---- Radius / shadow / motion ---- */
  --pp-radius: 10px;
  --pp-radius-sm: 8px;
  --pp-radius-pill: 999px;
  --pp-shadow: 0 6px 24px rgba(15, 28, 39, 0.10);
  --pp-shadow-lg: 0 14px 40px rgba(15, 28, 39, 0.16);
  --pp-shadow-btn: 0 4px 14px rgba(196, 57, 43, 0.28);
  --pp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pp-dur: 200ms;

  /* ---- Component surfaces ---- */
  --pp-bar-h: 60px;  /* sticky mobile conversion bar height */
}