/* =========================================================================
   DESIGN SYSTEM — color palette
   The single source of truth for colors. Every page links this first, then
   its own stylesheet references these tokens via var(--name).
   Change a color here → it updates everywhere.
   ========================================================================= */

:root {
  /* ---- Brand ---- */
  --accent: #7a45cf;        /* purple — deepened so white text stays legible on
                               fills. Originally sampled from the first Oct 25
                               flyer; that flyer is now amber (#ffc96e) + black,
                               and we kept purple on purpose — it pairs with the
                               amber rather than competing. Don't swap the accent
                               to amber without also flipping button text to
                               black: white on amber is ~1.7:1 and unreadable. */
  --accent-dark: #5b329f;   /* darker purple — featured-card hover overlay */

  /* ---- Neutrals ---- */
  --charcoal: #272425;      /* near-black. Used for the outlined secondary
                               button; also close to the flyer's ink. */

  /* ---- Text (3 tiers) ---- */
  --text: #111;             /* titles / primary text */
  --text-body: #333;        /* body copy */
  --text-meta: #666;        /* supporting / meta — the one secondary gray */

  /* ---- Surfaces ---- */
  --bg: #fff;               /* page background */
  --border: #ccc;           /* input / hairline borders */
}