/* Design tokens. Derived from the captured Cornbread Hemp reference, retuned for a two-category
   store that carries supplements alongside CBD. Change a value here, it changes everywhere. */
:root {
  /* Ground and ink */
  --c-page:        #FCF8F1;   /* cream page background */
  --c-surface:     #FFFFFF;   /* cards, product tiles */
  --c-band:        #EBE5D7;   /* alternating section band */
  --c-band-deep:   #DED8C6;   /* heavier band, dividers */
  --c-ink:         #063C30;   /* forest green, taken from the logo */
  --c-ink-soft:    #3F5F53;   /* secondary text, green-leaning */
  --c-ink-faint:   #7A8C84;   /* captions, meta */

  /* Accent: amber from the reference, plus a cooler green for the supplements side
     so the two halves of the catalogue are distinguishable without a second palette. */
  --c-accent:      #AD8844;   /* gold, taken from the logo */
  --c-accent-deep: #8E6D32;   /* hover */
  --c-accent-soft: #F0E6D0;   /* tinted fill */
  --c-leaf:        #0C5A45;   /* supplements accent, a lighter forest */
  --c-leaf-soft:   #D9E5DD;

  /* Semantic */
  --c-good:        #3F7A52;
  --c-warn:        #B5761F;
  --c-crit:        #9A3B28;
  --c-line:        #D8D2C2;

  /* Type. Reference ran an 18px body, which is unusually large and worth keeping: it reads
     as confident rather than cramped and suits long ingredient copy. */
  --f-display: "Zilla Slab", Georgia, serif;
  --f-body:    "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  --f-ui:      "Barlow", "Helvetica Neue", Arial, sans-serif;

  --t-xs: 0.78rem; --t-sm: 0.875rem; --t-base: 1.125rem; --t-lg: 1.25rem;
  --t-xl: 1.5rem;  --t-2xl: 2rem;    --t-3xl: 2.75rem;   --t-4xl: 3.75rem;

  /* Space, on a 4px scale */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;   --s-8: 4rem;    --s-9: 6rem;

  /* Shape. Reference is square-cornered except for fully-round pill buttons. */
  --r-none: 0; --r-sm: 4px; --r-md: 8px; --r-pill: 200px;
  --shadow-card: 0 1px 2px rgba(68,56,42,.06), 0 8px 24px rgba(68,56,42,.06);
  --shadow-lift: 0 2px 6px rgba(68,56,42,.10), 0 16px 40px rgba(68,56,42,.10);

  --wrap: 1280px;
  --gutter: 1rem;
}
@media (min-width: 768px) { :root { --gutter: 2rem; } }

/* Dark mode is deliberately not offered. The reference commits to a single warm world and
   inverting it produces a muddy brown that reads as broken rather than designed. */