/* =====================================================================
   bnd — THEME   ◀──  EDIT THIS FILE TO RE-BRAND THE WHOLE PAGE
   ---------------------------------------------------------------------
   Every brand color and font lives here. Change a value and it cascades
   through every section automatically. Nothing else in the CSS hardcodes
   a brand color.  Load order: theme.css → common.css → media.css.
   ===================================================================== */
:root{
  /* ---------- layout ---------- */
  --maxw: 660px;                 /* content column width */

  /* ---------- neutrals ---------- */
  --ink:   #16233d;   /* headlines / darkest text */
  --body:  #2a2f3a;   /* body copy */
  --muted: #5b626e;   /* captions, references, footnotes */
  --page:  #ffffff;   /* page background */
  --soft:  #f1f2f4;   /* light-grey bands (references / footer / asides) */

  /* ---------- core brand palette ---------- */
  --blue:    #2a72b8;   /* primary accent + links */
  --blue-dk: #173a63;
  --green:   #2ea24c;   /* checks, price, positive */
  --red:     #d8392b;   /* option 1, quiz marks, warnings */
  --gold:    #f4b32c;   /* highlights, "Your Nth Bonus", seal — use ONLY on dark bg */
  --gold-lt: #ffc63a;   /* lighter gold */
  --gold-dk: #cf9a23;   /* darker gold (seal edge) */

  /* CONTRAST RULE: text set over a colored background ("reverse type") must keep
     a strong value difference. Gold/yellow only reads on DARK navy. On the LIGHT
     hero, the headline accent uses this high-contrast color instead of gold. */
  --hero-accent: #c0392b;   /* hero headline accent (deep red) — readable on light hero bg */
  --gold-ink:    #a8741a;   /* readable deep-amber for gold emphasis on LIGHT bands (.yellow) */

  /* hand-drawn annotation "ink" — distinct from semantic red (Incorrect!/UPDATE) */
  --note-ink: #2c5aa0;   /* blue ballpoint */
  --note-red: #c0392b;   /* red pen */

  /* ---------- call-to-action button ---------- */
  --orange1:  #f9a722;  /* button gradient top */
  --orange2:  #f3801c;  /* button gradient bottom */
  --orange-dk:#c9650f;  /* button bevel / shadow */

  /* ---------- emphasis boxes ---------- */
  --callout:  #2a6db5;  /* blue callout / split-callout boxes */
  --cream:    #fdf6e1;  /* offer box background */
  --cream-bd: #e7c66a;  /* offer box border */
  --gift1:    #2f6fb0;  /* bonus-box header gradient top */
  --gift2:    #1d4f8b;  /* bonus-box header gradient bottom */

  /* ---------- dark ("reverse") sections ---------- */
  --navy1: #143052;     /* gradient top */
  --navy2: #0a1d33;     /* gradient bottom */

  /* ---------- hero background (shown until a hero-bg image is added) ---------- */
  --hero1: #d6effa;
  --hero2: #bfe4f3;
  --hero3: #9ed4ea;

  /* ---------- misc accents ---------- */
  --frame: #db5a3a;     /* framed-photo edge */
  --ic1: #7a5cc0;       /* offer feature icon 1 */
  --ic2: #2a9d8f;       /* offer feature icon 2 */
  --ic3: #2a72b8;       /* offer feature icon 3 */

  /* ---------- placeholder boxes (only visible until real images are slotted) ---------- */
  --ph-photo:   #66788d;
  --ph-graphic: #5b6bb0;
  --ph-chart:   #2f8f9d;
  --ph-icon:    #27b0a0;
  --ph-logo:    #d7dbe1;

  /* ---------- fonts ---------- */
  --font-head: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat", "Segoe Script", "Comic Sans MS", cursive;
  --font-cta:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  /* CTA buttons: modern sans */

  /* ---------- guarantee term (single source of truth) ----------
     Used by CTAs, COMPARE, and the GUAR seal so they can never disagree.
     This is the CSS reference; the PHP value lives in index.php ($GUARANTEE_DAYS). */
}