/* ============================================================
   TradeZoon — Shared Design Tokens
   Add this once to your theme (Appearance → Customize → Additional
   CSS, or your child theme's style.css / a global "Custom CSS" block
   loaded on every page). Every section snippet below reads its colors,
   fonts, radii and shadows from these variables — change a value here
   once, and every section that uses it updates automatically.
============================================================= */
:root{
  /* ---------- Brand colors ---------- */
  --tz-red:         #922F2E;  /* logo red — use to highlight/accent */
  --tz-red-bright:  #C0463F;  /* red, lifted for contrast on dark backgrounds */
  --tz-red-deep:    #7A2523;  /* darker red — gradients, hover states */
  --tz-brown:       #53280A;  /* primary heading/label brown */
  --tz-brown-muted: #7A4224;  /* softer brown — decorative use on dark bg */
  --tz-ink:         #241207;  /* near-black — main heading color */
  --tz-body:        #5A4632;  /* body copy color (light sections) */
  /* ---------- Light-theme backgrounds ---------- */
  --tz-bg-light:      #F7F2EA;  /* standard section background */
  --tz-bg-light-alt:  #FBF8F3;  /* slightly lighter alt background */
  --tz-bg-card:       #FFFFFF;  /* card / table background */
  --tz-border:        #E7DBC8;  /* hairline borders, dividers */
  --tz-bg-header-tint:#FBF6EE;  /* table header / label cell tint */
  --tz-bg-tz-tint:    #FBF0EE;  /* "TradeZoon wins" comparison-column tint */
  --tz-bg-todo:       #FBEDEA;  /* dashed placeholder / TODO callout background */
  --tz-bg-icon-soft:  #F3E7D6;  /* soft circle behind icons */
  /* ---------- Dark contrast band (e.g. stats section) ---------- */
  --tz-bg-dark-1:     #2B1608;  /* gradient start */
  --tz-bg-dark-2:     #1A0D05;  /* gradient end */
  --tz-cream:         #FBF3E7;  /* light text on dark backgrounds */
  --tz-tan:           #D8C3A6;  /* muted secondary text on dark backgrounds */
  --tz-border-on-dark: rgba(255,255,255,0.12);
  --tz-white:         #FFFFFF;
  /* ---------- Wood species swatches (used if no photo yet) ---------- */
  --tz-swatch-ash:       #E9DEC6;
  --tz-swatch-pine:      #EAD9A8;
  --tz-swatch-red-oak:   #A15A3C;
  --tz-swatch-white-oak: #C6A579;
  /* ---------- Typography ---------- */
  --tz-font-heading: "Exo 2", sans-serif;
  --tz-font-body:    "CircularStd", sans-serif;
  /* ---------- Radius ---------- */
  --tz-radius-lg:   14px;
  --tz-radius-md:   12px;
  --tz-radius-sm:   8px;
  --tz-radius-pill: 999px;
  /* ---------- Shadows ---------- */
  --tz-shadow-sm: 0 2px 6px rgba(36,18,7,0.05);
  --tz-shadow-md: 0 14px 30px rgba(36,18,7,0.10);
  --tz-shadow-lg: 0 18px 40px rgba(36,18,7,0.10);
  /* ---------- Section spacing ---------- */
  --tz-section-pad:         88px 24px;
  --tz-section-pad-mobile:  64px 20px;
}