/* ==========================================================================
   Design tokens
   → Shopify: colours/fonts become config/settings_schema.json settings and
     Dawn colour schemes (scheme-1…n); the rest stays as CSS variables in
     assets/base.css. Brand hex values are approximations of the pack artwork,
     NOT official brand values.
   ========================================================================== */
:root {
  /* Colour */
  --color-red: #C71920;          /* primary CTA / accent */
  --color-red-dark: #951419;
  --color-green: #17633A;        /* vegetarian graphics only */
  --color-yellow: #F6DF35;       /* labels, highlights */
  --color-cream: #F6F2E9;        /* page background */
  --color-cream-dark: #ECE5D5;
  --color-text: #27211D;
  --color-text-muted: rgba(39, 33, 29, .68);
  --color-white: #FFFFFF;
  --color-line: rgba(39, 33, 29, .14);

  /* Dawn-style colour scheme variables (swap per section with .color-scheme-*) */
  --scheme-bg: var(--color-cream);
  --scheme-fg: var(--color-text);
  --scheme-accent: var(--color-red);

  /* Type — prototype pairing; final fonts set in theme settings */
  --font-heading: "Young Serif", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;

  /* Layout (Dawn: --page-width, --grid-desktop-horizontal-spacing, section padding) */
  --page-width: 1200px;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --section-padding: clamp(2.75rem, 6vw, 5.5rem);
  --grid-gap: clamp(.75rem, 2vw, 1.5rem);

  /* Shape */
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(39, 33, 29, .06), 0 8px 24px rgba(39, 33, 29, .06);
  --shadow-pop: 0 18px 50px rgba(39, 33, 29, .22);

  /* Header */
  --header-height: 68px;
  --announcement-height: 2.5rem;
}

/* Colour-scheme helpers → Dawn "color-scheme-N" classes */
.color-scheme-cream  { --scheme-bg: var(--color-cream); --scheme-fg: var(--color-text); }
.color-scheme-white  { --scheme-bg: var(--color-white); --scheme-fg: var(--color-text); }
.color-scheme-red    { --scheme-bg: var(--color-red); --scheme-fg: var(--color-cream); --scheme-accent: var(--color-yellow); }
.color-scheme-dark   { --scheme-bg: var(--color-text); --scheme-fg: var(--color-cream); --scheme-accent: var(--color-yellow); }
.color-scheme-yellow { --scheme-bg: var(--color-yellow); --scheme-fg: var(--color-text); --scheme-accent: var(--color-red); }
[class*="color-scheme-"] { background: var(--scheme-bg); color: var(--scheme-fg); }