:root {
  /* brand colors — matched to live snackclubmarketing.com */
  --primary: #00286b;          /* navy */
  --brand-secondary: #febc43;  /* yellow — accent only (buttons, badges, stickers) */
  --brand-3: #92cacd;          /* teal — tag pill + accents */
  --cream: #faf6ec;            /* soft warm bg — primary section background */
  --error: #dc2626;

  /* neutrals */
  --white: #fff;
  --black: #000;
  --bg-color-01: #1e1f1e;
  --bg-color-02: #2a2b2a;
  --bg-color-03: #747876;
  --bg-color-04: #a9acaa;
  --bg-color-05: #d0d0d0;
  --bg-color-06: #eef1f3;
  --text-color-01: #0f0f0f;
  --text-color-02: #3b3e3c;
  --text-color-03: #fbfbfb;
  --text-color-04: #6b6e6c;

  /* legacy aliases — keep existing components alive while we migrate */
  --color-navy: var(--primary);
  --color-navy-light: #003d99;
  --color-gold: var(--brand-secondary);
  --color-gold-hover: #ecaa2c;
  --color-teal: var(--brand-3);
  --color-teal-soft: rgba(146, 202, 205, 0.18);
  --color-dark: var(--bg-color-01);
  --color-dark-hover: #2a2b2a;
  --color-bg: var(--white);
  --color-bg-alt: var(--bg-color-06);
  --color-bg-card: var(--white);
  --color-border: #e2e2e2;
  --color-text: var(--text-color-01);
  --color-text-muted: var(--text-color-02);
  --color-text-dim: var(--text-color-04);
  --color-white: var(--white);
  --color-cta: var(--brand-secondary);
  --color-cta-hover: #ecaa2c;
  --color-cta-text: var(--primary);

  /* fonts — match live site */
  --font-display: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* type scale — uppercase headings like live site */
  --fs-hero: clamp(2.2rem, 4.5vw + 0.8rem, 3.5rem);    /* ~55px */
  --fs-h1: clamp(2.2rem, 4.5vw + 0.8rem, 3.5rem);
  --fs-h2: clamp(2rem, 4vw + 0.7rem, 3.5rem);          /* ~56px */
  --fs-h3: clamp(1.4rem, 1.5vw + 0.9rem, 2rem);
  --fs-h5: 1.25rem;
  --fs-body: 1.125rem;     /* 18px live site */
  --fs-sm: 1rem;
  --fs-xs: 0.875rem;

  /* spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* layout */
  --container: 1280px;
  --container-narrow: 860px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* nav height — used for hero offset */
  --nav-height: 92px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 300ms;
}