/* ============================================================================
   tokens.css — Lorenzo Plumbing & Heating design tokens (single source of truth)
   Color · type scale · spacing · radius · shadow · motion · z-index · layout.
   Taste rules & banned patterns: docs/brand-kit.md (read it first).
   Spec: docs/design-system.md. Consumed by styles.css.
   ============================================================================ */
@import url("../fonts/fonts.css");

:root{
  /* ---- Brand color ---- */
  --blue:#1668C9;
  --blue-deep:#0F4E9C;
  --blue-700:#0B3D7A;
  --blue-tint:#EAF1FB;
  --water:#3FA9F5;
  --water-bright:#8FD3FF;
  --ink:#0E1518;
  --ink-80:rgba(14,21,24,.80);
  --ink-65:rgba(14,21,24,.65);
  --ink-45:rgba(14,21,24,.45);
  --surface:#FFFFFF;
  --surface-soft:#F5F8FC;
  --surface-deep:#0B141C;     /* near-black panels / footer */
  --line:#E3E9F1;
  --line-strong:#CBD6E4;
  --white:#FFFFFF;
  --accent-red:#C0392B;       /* from logo underline — alert accent, used sparingly */
  --gold:#F5B301;             /* review stars */

  /* ---- Type ---- */
  --display:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display:clamp(2.9rem, 7vw, 6.2rem);
  --fs-h1:clamp(2.4rem, 5.4vw, 4.5rem);
  --fs-h2:clamp(2rem, 4vw, 3.3rem);
  --fs-h3:clamp(1.35rem, 1.9vw, 1.7rem);
  --fs-eyebrow:clamp(.72rem, .9vw, .82rem);
  --fs-body:clamp(1.02rem, 1.1vw, 1.15rem);
  --fs-lede:clamp(1.1rem, 1.5vw, 1.4rem);
  --fs-stat:clamp(2.6rem, 5vw, 4.4rem);
  --fs-small:.85rem;

  /* ---- Spacing scale (4px base) ---- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:5rem; --s10:6rem; --s12:8rem;
  --section-y:clamp(4rem, 9vw, 8rem);

  /* ---- Layout ---- */
  --container:1200px;
  --container-wide:1380px;
  --gutter:clamp(1.1rem, 4vw, 2.25rem);

  /* ---- Radius / shadow ---- */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(14,21,24,.06), 0 1px 2px rgba(14,21,24,.04);
  --shadow-md:0 14px 36px rgba(14,21,24,.10);
  --shadow-lg:0 30px 70px rgba(11,61,122,.18);
  --shadow-blue:0 18px 50px rgba(22,104,201,.28);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.65,.05,.36,1);
  --t-fast:140ms; --t:240ms; --t-slow:520ms;

  /* ---- Z-index ---- */
  --z-header:100; --z-callbar:150; --z-nav:200; --z-modal:300;
}