/* =============================================================================
   Bread & Better — Design tokens (verbatim from the design-system bundle:
   tokens/fonts.css + colors.css + typography.css + spacing.css + effects.css)
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  /* --- Brand core --- */
  --bb-forest:        #2B5D3E;  /* Primary. Buttons, brand blocks, links. */
  --bb-pine:          #1E4A30;  /* Hover & depth on forest. */
  --bb-amber:         #C77A33;  /* Accent. Warmth, sale, highlights. */
  --bb-amber-deep:    #A85E1F;  /* Hover on amber. */
  --bb-amber-hover:   #B0682A;  /* Amber button hover (softer step). */

  /* --- Neutrals (warm) --- */
  --bb-cream:         #F6EEE1;  /* Page background. */
  --bb-paper:         #FCF8F0;  /* Cards & surfaces. */
  --bb-butter:        #F3E4C4;  /* Soft tint, chips, sale flags. */
  --bb-sage-mist:     #E9E7D6;  /* Alt section tint. */
  --bb-ink:           #221F1B;  /* Primary text & carb roundel. */
  --bb-ink-black:     #1A1714;  /* True black roundel / dark blocks. */
  --bb-stone:         #6B6155;  /* Secondary text. */
  --bb-stone-soft:    #9A8E7C;  /* Tertiary / captions. */
  --bb-line:          #EADFCB;  /* Borders & dividers on paper. */
  --bb-line-cream:    #E7DBC6;  /* Borders on cream. */
  --bb-line-strong:   #E3D6BF;  /* Heavier dividers. */

  /* --- Sub-brand accents --- */
  --bb-mollys:        #2F7D4E;  /* Molly's Keto Kitchen eyebrow. */
  --bb-better:        #2E7D74;  /* Better Foods eyebrow. */
  --bb-master:        #C77A33;  /* Bread & Better first-party eyebrow. */

  /* --- Semantic aliases --- */
  --surface-page:     var(--bb-cream);
  --surface-card:     var(--bb-paper);
  --surface-tint:     var(--bb-butter);
  --surface-alt:      var(--bb-sage-mist);
  --surface-dark:     var(--bb-ink-black);
  --surface-brand:    var(--bb-forest);

  --text-primary:     var(--bb-ink);
  --text-secondary:   var(--bb-stone);
  --text-muted:       var(--bb-stone-soft);
  --text-on-dark:     var(--bb-cream);
  --text-eyebrow:     var(--bb-amber);

  --border-default:   var(--bb-line);
  --border-on-cream:  var(--bb-line-cream);
  --border-strong:    var(--bb-line-strong);

  --action-primary:        var(--bb-forest);
  --action-primary-hover:  var(--bb-pine);
  --action-accent:         var(--bb-amber);
  --action-accent-hover:   var(--bb-amber-hover);
  --action-on-primary:     var(--bb-cream);
  --action-on-accent:      var(--bb-ink);

  --focus-ring:       var(--bb-forest);

  /* --- Typography --- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   var(--font-display);
  --font-sans:    var(--font-body);

  --fw-regular:   400;
  --fw-medium:    500;   /* Newsreader headline default */
  --fw-semibold:  600;
  --fw-bold:      700;   /* Hanken labels / buttons */
  --fw-black:     800;   /* Hanken emphasis, prices, roundel */

  --fs-display:   clamp(46px, 6.4vw, 88px);
  --fs-h1:        clamp(40px, 5vw, 64px);
  --fs-h2:        clamp(30px, 4vw, 48px);
  --fs-h3:        22px;
  --fs-lead:      19px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-eyebrow:   13px;
  --fs-micro:     11px;

  --lh-display:   0.98;
  --lh-heading:   1.1;
  --lh-snug:      1.25;
  --lh-body:      1.6;

  --ls-display:   -0.025em;
  --ls-heading:   -0.02em;
  --ls-tight:     -0.01em;
  --ls-normal:    0;
  --ls-eyebrow:   0.18em;
  --ls-label:     0.14em;
  --ls-chip:      0.06em;

  /* --- Spacing (4px base) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px;
  --sp-18: 72px; --sp-22: 88px; --sp-24: 96px;
  --gap-card:      20px;
  --gap-tight:     10px;
  --pad-card:      20px;
  --pad-card-lg:   34px;
  --pad-section-x: 32px;
  --section-y:     88px;
  --container:     1240px;
  --container-doc: 1180px;

  /* --- Radii --- */
  --radius-sm:   12px;   /* Small info cards */
  --radius-md:   16px;   /* Chips group, swatches */
  --radius-lg:   20px;   /* Panels, logo lockups */
  --radius-xl:   22px;   /* Product & content cards */
  --radius-2xl:  28px;   /* Hero image, feature blocks */
  --radius-pill: 999px;  /* Buttons, tags, inputs, roundel */

  /* --- Shadows (warm ink, never neutral grey) --- */
  --shadow-rest:    0 1px 2px rgba(34, 31, 27, 0.04);
  --shadow-hover:   0 18px 40px -18px rgba(34, 31, 27, 0.28);
  --shadow-float:   0 14px 30px -14px rgba(34, 31, 27, 0.30);
  --shadow-roundel: 0 14px 30px -10px rgba(0, 0, 0, 0.50);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  0.2s;
  --dur-card:  0.25s;
  --dur-image: 0.5s;

  --blur-header: blur(10px);
}