/* ============================================================
   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: "shop sign". Near-black grounds, one saturated blue,
   one hot orange, and deliberately NOT polished — chunky borders,
   hard offset shadows, heavy uppercase. Checked against the
   portfolio first: nobody had a real blue (Houston's is a
   desaturated grey, Dallas is near-black navy) and nobody had
   orange at all.
   ============================================================ */
:root{
  /* ---- brand palette ---- */
  --brand:#14181F;         /* near-black — header, dark sections */
  --brand-dk:#0A0D12;      /* deeper — scrims, footer */
  --brand-md:#2A3242;      /* borders on dark */
  --brand-lt:#E3E9F5;      /* pale blue wash — icon plates */

  /* --accent carries LINK TEXT as well as buttons, so it is the blue.
     Orange at #F2600C is only ~3.3:1 on white and fails as body-sized text.
     The orange lives in --zest and is pulled onto the primary button by a
     delta rule in main.css, which is where the punch is wanted. */
  --accent:#0F3D91;        /* saturated blue — links, prices */
  --accent-dk:#0A2B68;
  --accent-lt:#E3E9F5;
  --ruby:#F2600C;          /* decorative only */

  --zest:#F2600C;          /* hot orange — stats, primary CTA, eyebrows on dark */
  --zest-lt:#FDEADF;

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;
  --cream:#EFEEEA;         /* warm off-white — alternating sections */
  --ink:#14181F;
  --muted:#5B6270;
  --line:#D6D3CC;

  /* ---- type ----
     One family, worked hard. 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,
     tracking 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 ----
     Square corners and a hard shadow: the "not too polished" brief lives here
     more than anywhere. A blurred shadow would undo it. */
  --r:2px;
  --r-sm:2px;
  --maxw:1180px;
  --shadow:4px 4px 0 rgba(20,24,31,1);

  /* ---- 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 sitting over the photograph. */
  --scrim-rgb:10,13,18;
  --band-rgb:10,13,18;
  --ink-rgb:20,24,31;
  --zest-rgb:242,96,12;

  --paper:#FBFAF7;
  --paper-rgb:251,250,247;

  --zest-ink:#14181F;      /* dark text on orange — warning-sign contrast, 6.2:1 */
  --zest-dk:#D24E05;

  --on-brand:#C6CDDA;
  --on-brand-dim:#B4BDCC;
  --on-brand-mute:#A3ADBE;
  --on-brand-fade:#8590A3;

  /* ---- hero focal point ----
     Set after the real photograph exists and the crop is measured in a
     browser. 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:58% 40%;
  --hero-focus-sm:60% 46%;

  --hero-band-h:min(78vh,640px);
}