/* Rainwater Services — design tokens
   Tokens follow RAINWATER_SERVICES_BRAND_GUIDE.md v2.0

   This file is the source of truth for the palette, the type scale and the
   handful of values worth tuning. Edit it through styleguide.html, which
   writes these live and will emit a replacement for the block below.

   Load order matters: tokens.css must come before site.css.

   Not everything is a token on purpose. A value earns a slot here only if
   you would plausibly want to drag it; one-off numbers stay inline in
   site.css where they are readable next to the rule that uses them. */

:root{
  /* ---------- palette ---------- */
  --ocean:#0077BE; --deep:#005A8C; --abyss:#00364F;
  --green:#3E9443; --green-bright:#66BB6A;
  --ink:#16262E; --ink-soft:#4C6570; --ink-faint:#5F727B;
  --tint:#F1F6F8; --rule:#D9E5EA; --paper:#FFFFFF;

  /* ---------- type ---------- */
  --head:'Montserrat',system-ui,-apple-system,sans-serif;
  --body:'Open Sans',system-ui,-apple-system,sans-serif;
  --body-size:17px;
  --body-leading:1.65;
  --head-tracking:-.021em;

  /* ---------- layout ---------- */
  --wrap:1140px;
  --band-pad:74px;
  --band-pad-tight:52px;

  /* ---------- homepage hero overlay ----------
     Tuned against hero-waterfront.jpg specifically — see the note in
     site.css. The four stops run left to right at 0/40/72/100%.

     The photo and its framing are NOT here: they are --ph-home-photo and
     --ph-home-pos in the generated block below, so the homepage hero photo
     can be changed in the CMS like every other one. These four stops are
     not generated, because a scrim is tuned to a photo and swapping the
     photo does not retune it. tools/check-hero-contrast.py measures the
     result and refuses a photo that reads worse than the one recorded. */
  --hero-base:#00364F;
  --hero-o1:rgba(0,40,60,.58);
  --hero-o2:rgba(0,54,79,.34);
  --hero-o3:rgba(0,54,79,.12);
  --hero-o4:rgba(0,54,79,.04);
  --hero-text-shadow:0 2px 26px rgba(0,25,40,.6);
  --hero-lede-shadow:0 1px 14px rgba(0,25,40,.65);

  /* ---------- page hero overlay ----------
     Same four-stop scheme as the homepage hero above, so both heroes are
     tuned the same way. The stops run left to right at 0/40/72/100%.

     These four defaults trace the exact ramp the old two-stop gradient
     produced, so changing nothing here changes nothing on the page. o2 and
     o3 are the 40% and 72% samples of that ramp, computed in premultiplied
     sRGB, which is how the browser interpolates a gradient with varying
     alpha. Move them freely once you are tuning for a specific photo. */
  --pagehero-o1:rgba(0,40,60,.58);
  --pagehero-o2:rgba(0,48,74,.484);
  --pagehero-o3:rgba(0,58,90,.407);
  --pagehero-o4:rgba(0,70,110,.34);

  /* ---------- page hero framing ----------
     Generated from src/data/heroes.json by tools/build-heroes.py. Each hero's
     photo and its background-position live here rather than in site.css
     because a relative url() inside a custom property resolves against the
     stylesheet, not the document; this file sits beside site.css so it
     resolves the same. Do not hand-edit between the markers.
     Why a given hero is framed the way it is: irrigation is a square source,
     so a centred crop in this wide band is all turf and it biases up to hold
     the spray head; maintenance is a 2.56:1 panorama, so centred lands on the
     roofline and it biases down to hold the running zone and the trailer;
     watering was cropped to drop a composited logo and is near-square, so it
     biases down to hold the running heads. */
  /* ---------- the design ----------
     Two designs, one set of markup. Everything that differs between them is
     a token below, generated from src/data/theme.json by tools/build-theme.py
     and chosen in the CMS under Sticky bar colours, field "Design".

     Depth: deep ocean as a surface, solid cards, lawn green on every action.
     Field: white page, hairline rules, colour as an accent only.

     Nothing in site.css hardcodes a surface, a radius or a shadow any more;
     it reads these. That is what makes the switch one field rather than a
     second stylesheet to keep in step. */
  /* skin:start */
  /* Depth - deep ocean, solid cards, green on every action */
  --sk-hero-bg:#005A8C;
  --sk-hero-ink:#FFFFFF;
  --sk-hero-photo:var(--ph-home-photo);
  --sk-hero-photo-light:1;
  --sk-hero-scrim:none;
  --sk-hero-scrim-narrow:none;
  --sk-hero-scrim-phone:none;
  --sk-hero-panel:rgba(0,44,66,.88);
  --sk-hero-panel-radius:var(--sk-card-radius);
  --sk-hero-panel-pad:32px 38px 38px 0;
  --sk-hero-panel-bleed:-34px;
  --sk-hero-panel-max:620px;
  --sk-hero-cta-bg:#66BB6A;
  --sk-hero-cta-ink:#00364F;
  --sk-hero-lede:#CFE4EF;
  --sk-hero-cred:#B9D4E0;
  --sk-hero-rule:rgba(255,255,255,.22);
  --sk-shot-radius:16px;
  --sk-shot-shadow:0 22px 50px rgba(0,20,32,.45);
  --sk-shot-frame:0;
  --sk-band-alt:#F1F6F8;
  --sk-feature-bg:#005A8C;
  --sk-feature-ink:#FFFFFF;
  --sk-feature-soft:#CFE4EF;
  --sk-feature-faint:#BFD9E4;
  --sk-card-bg:#FFFFFF;
  --sk-card-radius:14px;
  --sk-card-shadow:0 2px 14px rgba(0,54,79,.07);
  --sk-card-border:0;
  --sk-card-accent:5px solid #66BB6A;
  --sk-panel-bg:#00364F;
  --sk-panel-ink:#FFFFFF;
  --sk-panel-soft:#CFE4EF;
  --sk-panel-faint:#B9D4E0;
  --sk-panel-radius:18px;
  --sk-panel-border:0;
  --sk-cta-bg:#66BB6A;
  --sk-cta-ink:#00364F;
  --sk-btn-radius:10px;
  --sk-radius:12px;
  --sk-card-gap:16px;
  --sk-cell-rule:0;
  --sk-cell-inset:24px;
  --sk-stack-pad:22px 24px;
  --sk-stack-gap:0;
  --sk-stack-divider:4px solid #66BB6A;
  --sk-stack-first:4px solid #66BB6A;
  --sk-step-bg:rgba(255,255,255,.07);
  --sk-step-pad:24px;
  --sk-step-accent:4px solid #66BB6A;
  --sk-step-side:0;
  --sk-quote-bg:#FFFFFF;
  --sk-quote-pad:24px 26px;
  --sk-quote-shadow:0 2px 14px rgba(0,54,79,.07);
  --sk-planband-image:linear-gradient(100deg,#00364F,#004E78);
  --sk-planband-edge:0;
  --sk-panel-kicker:#A8DCAB;
  --sk-footer-bg:#005A8C;
  --sk-footer-ink:#C9DDE7;
  --sk-footer-faint:#BFD9E4;
  --sk-planband-flat:#004E78;
  --sk-tone-info-bg:#E7F1F7;
  --sk-tone-info-ink:#0B3A52;
  --sk-tone-info-edge:#7598AC;
  --sk-tone-caution-bg:#FDF3D4;
  --sk-tone-caution-ink:#4A3A05;
  --sk-tone-caution-edge:#A8903D;
  --sk-tone-warning-bg:#FBE6D2;
  --sk-tone-warning-ink:#5A2E06;
  --sk-tone-warning-edge:#C28548;
  --sk-tone-critical-bg:#F9DEDB;
  --sk-tone-critical-ink:#611310;
  --sk-tone-critical-edge:#C4685F;
  /* skin:end */

  /* ---------- the sticky bar on a phone ----------
     Generated from src/data/theme.json by tools/build-theme.py, and editable
     in the CMS. tools/check-theme-contrast.py refuses a combination where a
     label falls under AA on its button, or where a button falls under 3:1
     against the bar behind it - a button the same colour as its container is
     not a button, which is SC 1.4.11. */
  /* calltrap:start */
  --ct-bar:#002A3E;
  --ct-call-bg:#FFFFFF;
  --ct-call-ink:#005A8C;
  --ct-text-bg:#FFFFFF;
  --ct-text-ink:#005A8C;
  --ct-request-bg:#0077BE;
  --ct-request-ink:#FFFFFF;
  /* calltrap:end */

  /* heroes:start */
  --ph-about-photo:url("../img/about-team.jpg");
  --ph-about-pos:center 28%;
  --ph-drainage-photo:url("../img/drainage-install.jpg");
  --ph-drainage-pos:center;
  --ph-home-photo:url("../img/maintenance-hero.jpg");
  --ph-home-pos:center 65%;
  --ph-home-pos-narrow:70% 100%;
  --ph-home-zoom-narrow:155%;
  --ph-irrigation-photo:url("../img/rainwater-irrigation.jpg");
  --ph-irrigation-pos:center 40%;
  --ph-maintenance-photo:url("../img/sprinkler-in-rain.jpg");
  --ph-maintenance-pos:center 80%;
  --ph-harvesting-photo:url("../img/rainwater-harvesting.jpg");
  --ph-harvesting-pos:center 32%;
  /* heroes:end */

  /* Narrow portrait screens crop hard from the sides, which cut the branding
     off the trailer in the maintenance photo, so shift the frame right.
     Landscape and desktop are wide enough to keep the whole rig at `center`
     and are left alone. Applied in site.css under an orientation query. */
  --ph-maintenance-pos-portrait:90% 85%;

  /* ---------- page hero overlay, the two bright photos ----------
     rainwater-irrigation.jpg and about-team.jpg are correctly exposed
     daylight shots; the rest of the heroes are flatter. The standard scrim
     leaves their kicker under the 4.5:1 AA floor at every width, not just on
     phones, so these two carry a stronger scrim everywhere. Measured across
     six viewports from 360x740 to 1920x1080; the binding case for irrigation
     is landscape phone and for about is portrait phone.
     Same four stops: irrigation +.20 alpha, about +.18. */
  --ph-irrigation-o1:rgba(0,40,60,.78);
  --ph-irrigation-o2:rgba(0,48,74,.684);
  --ph-irrigation-o3:rgba(0,58,90,.607);
  --ph-irrigation-o4:rgba(0,70,110,.54);

  --ph-about-o1:rgba(0,40,60,.76);
  --ph-about-o2:rgba(0,48,74,.664);
  --ph-about-o3:rgba(0,58,90,.587);
  --ph-about-o4:rgba(0,70,110,.52);

  /* ---------- page hero overlay, portrait phones ----------
     A narrow portrait crop puts whatever is brightest in a photo directly
     behind hero text that now spans the full width, and the standard scrim
     is not always enough to hold the small kicker above the 4.5:1 AA floor.
     These are the same four stops, each +.18 alpha -- the smallest step that
     clears 4.5:1 on every hero that needs it. site.css opts individual heroes
     in by name; nothing else sees them.
     Raise or lower all four together -- moving one alone does little, because
     the text spans the full width and samples the whole ramp. */
  --pagehero-o1-portrait:rgba(0,40,60,.76);
  --pagehero-o2-portrait:rgba(0,48,74,.664);
  --pagehero-o3-portrait:rgba(0,58,90,.587);
  --pagehero-o4-portrait:rgba(0,70,110,.52);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}