/* ==========================================================
   BASE — variables, reset, typography
   LUNCHBOX 2.0 — bright / premium / appetizing design system.
   Used on every page. Edit brand colors/fonts here once.
   ========================================================== */
:root{
  --bg:#FFFFFF;              /* page background — bright, not cream-dim */
  --surface:#F7F5EF;         /* card / section-alt background */
  --surface-2:#FFF3EC;       /* warm accent-tinted surface (offers, calc) */
  --ink:#18170F;             /* primary text — warm near-black */
  --ink-soft:#4A4838;        /* secondary text */
  --taupe:#8C8977;           /* tertiary / muted text */
  --line: rgba(24,23,15,0.12);
  --line-light: rgba(24,23,15,0.06);

  --accent:#632A19;          /* deep rust — primary CTA buttons */
  --accent-ink:#FFFFFF;      /* text on accent */
  --accent-soft:#EDDAD3;     /* soft rust tint for badges/hover bg */
  --badge:#2E3825;           /* dark olive — eyebrow labels / small badges */
  --green:#6C7A64;           /* muted sage — franchise / secondary accent */
  --green-soft:#E8ECE4;

  --cream:var(--surface);    /* legacy alias used across older component files */
  --ink-soft-legacy:var(--ink-soft);

  /* FIXED — never touched by the theme switcher. For sections that are
     deliberately always-dark regardless of light/dark/random mode
     (final CTA strips, mobile nav overlay, franchise stat cards).
     This is what earlier broke: those sections used var(--ink) as a
     BACKGROUND, but --ink means "primary text colour" and FLIPS to a
     light value in dark mode — so the "dark" section silently became
     light, while its text stayed a fixed light colour too. */
  --deco-dark:#17150F;
  --deco-light:#F5F3EA;
  --deco-accent-light:#BFE0CB;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}
/* form controls don't inherit color/font by default in most browsers —
   without this, buttons/inputs stay black regardless of the active theme */
button, input, textarea, select { color: inherit; font: inherit; }
.serif{font-family:Georgia,"Noto Serif","Times New Roman",serif;font-style:italic;}
.eyebrow{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--taupe);
  font-weight:600;
}
.eyebrow.accent{color:var(--badge);}
a{color:inherit;text-decoration:none;}

/* shared pill button used across the whole site */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;font-size:13px;font-weight:600;letter-spacing:.02em;
  border-radius:100px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(0.85);}
.btn-secondary{background:var(--deco-dark);color:var(--deco-light);}
.btn-secondary:hover{background:#2B2818;}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-outline:hover{border-color:var(--ink);}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-outline-light:hover{border-color:#fff;}
.btn-green{background:var(--green);color:var(--green-ink,#fff);}
.btn-green:hover{filter:brightness(0.88);}