/* ============================================================
   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.

   Palette: "shade". Deep navy-ink grounds, cool pale slate
   surfaces, one teal accent. Teal is the only unused lane in the
   portfolio — #1 and #5 are green, #2 iron blue, #3 red, #4
   graphite, and every one of their accents is warm. It also
   happens to read as cooling, which is what this product sells.
   ============================================================ */
:root{
  /* ---- brand palette: navy ink ---- */
  --brand:#141C26;         /* navy ink — headers, dark sections */
  --brand-dk:#0B1119;      /* deeper — hovers, scrims, footer */
  --brand-md:#28323D;      /* mid — borders on dark */
  --brand-lt:#E2F0EF;      /* pale teal wash — icon plates */

  --accent:#0B7A75;        /* teal — primary CTAs, links, prices */
  --accent-dk:#095F5B;     /* teal hover */
  --accent-lt:#E2F0EF;     /* pale teal — icon plates */
  --ruby:#0B7A75;          /* decorative only; kept in family */

  /* --zest is used for text ON the dark brand ground (stats, CTAs on dark),
     so it is the BRIGHT teal. #0B7A75 would be unreadable there. */
  --zest:#6FD3CD;
  --zest-lt:#E2F0EF;

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;            /* page background */
  --cream:#EDF1F2;         /* cool pale slate — alternating sections */
  --ink:#141C26;           /* body text */
  --muted:#566B73;         /* secondary text */
  --line:#D9E1E3;          /* borders & rules */

  /* ---- type ----
     One family, two weights. The engine has exactly two font tokens and
     --sans drives buttons, nav and form inputs as well as body, so a second
     family here would land a display face inside every input. Character comes
     from weight and tracking instead. */
  --sans:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* ---- shape & rhythm ---- */
  --r:4px;
  --r-sm:3px;
  --maxw:1200px;
  --shadow:0 1px 2px rgba(20,28,38,.05),0 12px 26px -18px rgba(20,28,38,.32);

  /* ---- surfaces & text on dark / tinted overlays ----
     rgb triplets, not hex: CSS cannot build rgba() from a hex custom property.
     --scrim-rgb is the one that bites — it is a literal in the hero gradient,
     so a palette swap that misses it leaves the previous hue over the photo. */
  --scrim-rgb:12,17,25;
  --band-rgb:12,17,25;
  --ink-rgb:20,28,38;
  --zest-rgb:111,211,205;

  --paper:#FBFCFC;
  --paper-rgb:251,252,252;

  --zest-ink:#06302E;      /* text on a --zest surface */
  --zest-dk:#55BDB7;       /* --zest hover */

  --on-brand:#C7D6DC;      /* body text on --brand / scrim */
  --on-brand-dim:#B9CBD2;  /* secondary text on --brand */
  --on-brand-mute:#A9BCC4; /* stat labels on --brand */
  --on-brand-fade:#8598A0; /* breadcrumbs on --brand */

  /* ---- hero focal point ----
     Set after the real photograph exists and the crop is measured in a browser,
     not guessed. See the Pittsburgh and Plano notes: cover() discards a large
     share of a wide band, and Y=50% is rarely the right split. */
  --hero-focus:56% 46%;
  --hero-focus-sm:58% 50%;

  --hero-band-h:min(76vh,620px);
}