/* ============================================================
   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: "decking". Walnut grounds, golden CTA, warm off-white
   surfaces. Checked against the portfolio before choosing: nobody
   had a brown brand and nobody had a bright gold. Everything else
   is green, iron blue, red, graphite, navy or orange.
   ============================================================ */
:root{
  /* ---- brand palette: walnut ---- */
  --brand:#3B2A1C;         /* walnut — header, dark sections */
  --brand-dk:#291C12;      /* deeper — scrims, footer */
  --brand-md:#5A4230;      /* borders on dark */
  --brand-lt:#F3E7D2;      /* pale wash — icon plates */

  /* --accent carries LINK TEXT as well as buttons. Gold at #F5A800 is far
     under AA on white, so the readable walnut takes --accent and the gold
     lives in --zest, pulled onto the primary button by a delta in main.css. */
  --accent:#6B4423;        /* walnut — links, prices (~7:1 on white) */
  --accent-dk:#4E3119;
  --accent-lt:#F3E7D2;
  --ruby:#B4451F;          /* decorative only */

  --zest:#F5A800;          /* gold — primary CTA, stats, eyebrows on dark */
  --zest-lt:#FFF3D8;

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;
  --cream:#F7F3EC;         /* warm off-white — alternating sections */
  --ink:#231A12;
  --muted:#6B5E50;
  --line:#DED4C4;

  /* ---- type ----
     One family. The engine has two font tokens and --sans drives buttons, nav
     and inputs as well as body, so a second family would land a display face
     inside every form field. Character comes from weight and the uppercase
     rule at the foot of main.css. */
  --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:8px;
  --r-sm:4px;
  --maxw:1200px;
  --shadow:0 2px 0 rgba(35,26,18,.10),0 14px 30px -20px rgba(35,26,18,.45);

  /* ---- DECKING TEXTURE, in CSS — no image to load ----
     Three stacked repeating gradients: a lit top edge on each board, a dark
     gap between boards, fine vertical grain, warm walnut underneath. Used on
     the hero and the CTA band behind a lightened scrim. Because it is built
     from these tokens it survives a palette change. */
  --deck:repeating-linear-gradient(180deg,
             rgba(255,255,255,.055) 0 2px,
             transparent 2px 42px,
             rgba(0,0,0,.55) 42px 48px),
         repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),
         repeating-linear-gradient(90deg,#523A26 0 88px,#46301F 88px 176px);

  /* ---- surfaces & text on dark / tinted overlays ----
     rgb triplets, not hex: CSS cannot build rgba() from a hex custom property.
     --scrim-rgb is a literal inside the hero gradient, so a palette swap that
     misses it leaves the previous hue over the photograph. */
  --scrim-rgb:41,28,18;
  --band-rgb:41,28,18;
  --ink-rgb:35,26,18;
  --zest-rgb:245,168,0;

  --paper:#FDFBF7;
  --paper-rgb:253,251,247;

  --zest-ink:#231A12;      /* dark text on gold — the "press this" contrast */
  --zest-dk:#D89200;

  --on-brand:#E4D7C4;
  --on-brand-dim:#DCCDBB;
  --on-brand-mute:#C9B49C;
  --on-brand-fade:#A98F72;

  /* ---- hero focal point ----
     Tuned after the photograph existed and the crop was measured in a browser.
     The hero here carries the quote form on the right, so the photo is doing
     less work than on other sites and the scrim runs heavier. */
  --hero-focus:52% 46%;
  --hero-focus-sm:56% 50%;

  --hero-band-h:auto;
}