/* ==========================================================================
   Plumber Finder USA: design tokens. THE single source of truth.
   Every colour, size, space, radius, shadow and timing on the site comes from
   here. Change a value here and it changes on every page (front end + wp-login).
   Brand kit: /brand/BRAND-KIT.md (Logic Web Media workspace). Version: BK1 strict 2026-11-04.
   STRICT SET: 11 colour tokens + 3 alpha tokens, 7 type sizes, 3 line-heights, 3 weights, 3 radii, 3 shadows.
   Do not add a value here without updating /brand/BRAND-KIT.md.
   ========================================================================== */
@font-face{font-family:"Geist";src:url(fonts/geist-var-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/general-sans-var.woff2) format("woff2");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Attrib";src:url(fonts/roboto-500-attrib.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* ---- colour: 11 base tokens (the only colours the UI may use) ---- */
  --navy:#0A1533;           /* 1 dark surface, primary button on light, focus on light */
  --navy-2:#13234F;         /* 2 one step lighter: hover on navy, raised panels on navy */
  --copper:#E7A867;         /* 3 THE accent: CTA on dark, stars, pipe, underlines */
  --copper-hi:#F1C08C;      /* 4 copper hover */
  --copper-d:#9C5520;       /* 5 copper as text/links on light (5.0:1 on paper) */
  --paper:#F4F1EA;          /* 6 page background, quiet fills */
  --white:#FFFFFF;          /* 7 cards, inputs, text on dark */
  --ink:var(--navy);        /* text = navy (16.3:1 on paper); kept as a semantic alias */
  --muted:#516070;          /* 9 secondary text 5.7:1, input and ghost borders (>=3:1) */
  --line:#D8D1C4;           /* 10 decorative dividers and card edges only */
  --ok:#0B5A33;             /* 11 success text and edges 7.9:1 */
  --err:#B42318;            /* 12 error text and edges 6.6:1 */
  /* ---- 3 alpha tokens (no others) ---- */
  --on-dark:rgb(255 255 255 / .72);     /* secondary text on navy 9.6:1 */
  --on-dark-line:rgb(255 255 255 / .16);/* dividers and quiet fills on navy */
  --scrim:rgb(10 21 51 / .72);          /* photo scrims, dialog backdrop, sticky bars */
  /* ---- exempt (not UI colours) ---- */
  --gattr:#5E5E5E;          /* Google "Powered by Google" attribution grey, required by Google terms */
  /* semantic aliases (point at the 11, never new values) */
  --link:var(--copper-d); --focus:var(--navy);
  --hint:color-mix(in srgb,var(--muted) 70%,var(--white)); /* placeholder text only, derived from muted (3.3:1 on white); bk17 */

  /* ---- type: 7 sizes, 3 weights, 3 line-heights, 2 trackings ---- */
  --display-font:"General Sans",ui-sans-serif,system-ui,sans-serif;
  --body-font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-xs:12px;                          /* 1 fine print, labels */
  --t-sm:14px;                          /* 2 meta, buttons, captions */
  --t-base:16px;                        /* 3 body */
  --t-lg:20px;                          /* 4 lead, card titles, small headings */
  --t-xl:clamp(20px,2.2vw,28px);        /* 5 h3, listing names, side headings */
  --t-2xl:clamp(28px,3.75vw,48px);      /* 6 h2 in cards, phone numbers, sentence search */
  --t-display:clamp(48px,8vw,128px);    /* 7 page titles, section headlines, hero, big numbers */
  --w-regular:400; --w-medium:500; --w-semi:600;
  --lh-tight:.95; --lh-head:1.2; --lh-body:1.6;
  --tr-display:-.03em; --tr-title:-.01em;
  --measure:40em;

  /* ---- space (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:192px;
  --sec:clamp(96px,12vw,192px);   /* section rhythm */
  --pad:24px;                     /* page gutter, 48px >=768 */
  --max:1200px;                   /* content width */
  --nav-h:72px; --nav-h-m:64px; --nav-h-s:56px; /* header: desktop, mobile, scrolled */
  --tap:44px;                     /* minimum target */

  /* ---- shape: 3 radii, 3 shadows ---- */
  --r-sm:8px; --r:16px; --pill:999px;
  --sh-card:0 1px 2px rgb(10 21 51 / .06),0 0 0 1px rgb(10 21 51 / .06);
  --sh-float:0 10px 24px rgb(10 21 51 / .14);
  --sh-ring:inset 0 0 0 1px var(--muted);

  /* ---- motion ---- */
  --ease:cubic-bezier(.16,1,.3,1);
  --d-fast:.15s; --d-med:.35s; --d-slow:.9s;
  --rail:-24px;
}
@media (min-width:768px){:root{--pad:48px}}
@media (max-width:767px){:root{--rail:-13px}}