/* ============================================================
   TOKENS — single source of truth for the theme.
   Change a value here and it updates everywhere on the site.
   Nothing else in the CSS should contain a raw colour or size.

   Site #13 palette: "standing water, moving water, clay". Rain-washed
   pale blue ground, deep navy for dark sections, a strong flow blue for
   every call to action. Clay browns appear only in the soil diagram and
   the strata panel. Design approved on
   research/drainage-kansas-city/homepage-mockup.html.
   ============================================================ */

/* Schibsted Grotesk (headings) and Public Sans (body) — both SIL OFL 1.1,
   self-hosted variable fonts, latin subset. See ../fonts/README.md. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-latin.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/public-sans-latin.woff2) format('woff2')}

:root{
  /* ---- brand palette ---- */
  --brand:#0E3552;         /* standing water — dark sections, hub bands */
  --brand-dk:#0A2940;      /* deeper navy — footer, scrims */
  --brand-md:#2B5578;      /* mid — borders on hover, hero placeholder */
  --brand-lt:#E3EEFB;      /* pale blue — icon plates, menu hover */

  --accent:#1B6FD8;        /* moving water — every primary CTA, links */
  --accent-dk:#1459B0;     /* CTA hover */
  --accent-lt:#E3EEFB;     /* pale accent — chips, plates */
  --ruby:#1B6FD8;          /* engine decorative token — same blue here */

  /* --zest is the engine's "highlight on dark": stat figures, the phone
     button in dark boxes. Here it is rain blue on navy. */
  --zest:#A9CBEA;
  --zest-lt:#DCE9F3;
  --zest-ink:#0A2940;
  --zest-dk:#C4DBF0;

  /* ---- surfaces & text ---- */
  --bg:#EDF2F5;            /* rain-washed page ground */
  --cream:#FFFFFF;         /* alternating section surface */
  --surface:#FFFFFF;       /* cards, form card, diagram frame */
  --ink:#0F2433;           /* body text */
  --muted:#445868;         /* secondary text */
  --ink-faint:#72879A;     /* captions, column heads */
  --line:#CBD6DE;          /* borders & rules */
  --sky:#DCE9F3;           /* diagram sky, placeholders */
  --rain:#A9CBEA;          /* rain strokes, dashed connectors */
  --water:#2E86DE;         /* water in the diagram, legend numbers */
  --grass:#5F8C4B;         /* "fixed" state in the diagram */
  --on-deep:#B9CCDC;       /* body text on --brand sections */
  --on-hero:#C9DAE8;       /* body text on the hero photo */
  --white:#FFFFFF;

  /* ---- soil (diagram + strata panel only) ---- */
  --clay:#B89572;
  --clay-line:#A7835F;
  --topsoil:#6B5846;
  --concrete:#D9DEE2;
  --concrete-dk:#C4CBD1;
  --concrete-edge:#8C98A2;
  --pipe:#445868;
  --gravel:#C9CFD4;
  --gravel-dot:#9AA3AA;
  --gravel-dot2:#A9B1B7;
  --basement:#F3F6F8;
  --s-grass:#2F5A3A;
  --s-top:#4E4032;
  --s-clay:#8C6D4E;
  --s-clay2:#7A5E42;
  --strata-edge:rgba(255,255,255,.14);

  /* ---- type ---- */
  --display:"Schibsted Grotesk",system-ui,sans-serif;
  --serif:var(--display);  /* engine heading token */
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ---- shape & rhythm ---- */
  --r:6px;
  --r-sm:6px;
  --pill:999px;
  --maxw:1180px;
  --gut:clamp(16px,5vw,56px);
  --shadow:0 24px 48px -24px rgba(4,20,33,.6);   /* hero form card */

  /* ---- surfaces & text on dark / tinted overlays ---- */
  --scrim-rgb:10,41,64;      /* inner-page hero photo overlay = --brand-dk */
  --band-rgb:14,53,82;       /* CTA band overlay */
  --ink-rgb:15,36,51;
  --zest-rgb:169,203,234;
  --hero-scrim-l:rgba(10,41,64,.92);
  --hero-scrim-m:rgba(10,41,64,.74);
  --hero-scrim-r:rgba(10,41,64,.28);
  --hero-scrim-sm:rgba(10,41,64,.82);
  --ghost-line:rgba(255,255,255,.35);
  --ghost-hover:rgba(255,255,255,.08);

  --paper:#FFFFFF;
  --paper-rgb:255,255,255;

  --on-brand:#C9DAE8;
  --on-brand-dim:#A9CBEA;
  --on-brand-mute:#A9CBEA;
  --on-brand-fade:#8FAAC2;

  /* ---- hero focal point ----
     Home hero: the house and standing water sit in the right half, open lawn
     and fence on the left under the heaviest scrim. */
  --hero-focus:72% 60%;
  --hero-focus-sm:78% 60%;
  --hero-band-h:min(52vh,440px);
}