/* Beautyforest, design tokens.
   The single source of truth for the design system. Every other stylesheet,
   block and template consumes these variables. Colours reference theme.json
   presets; this layer adds the scale/rhythm/component tokens theme.json can't. */

:root{
  /* ---- Colour aliases (from theme.json presets) ---- */
  --bf-green:var(--wp--preset--color--brand-green);   /* #2FAA5A actions only (white label) */
  --bf-green-hover:var(--wp--preset--color--green-hover); /* #34B765 */
  --bf-green-deep:var(--wp--preset--color--green-deep);   /* #1F8044 deep accent: links/labels, focus/active */
  --bf-forest:var(--wp--preset--color--forest);       /* #2FAA5A accent TEXT/links */
  --bf-green-ink:var(--wp--preset--color--green-ink); /* #143A24 dark heading/label on green/light */
  --bf-leaf:var(--wp--preset--color--leaf);           /* #3CC471 logo lime, sparing accent only */
  --bf-mint:var(--wp--preset--color--mint);           /* #EDEDED neutral tint/beds */
  --bf-paper:var(--wp--preset--color--paper);         /* #FAFBF8 page bg */
  --bf-white:var(--wp--preset--color--white);         /* #FFFFFF surfaces */
  --bf-graphite:var(--wp--preset--color--graphite);   /* #171716 text/chrome */
  --bf-stone-deep:var(--wp--preset--color--stone-deep); /* #515A4D secondary text */
  --bf-stone:var(--wp--preset--color--stone);         /* #6B7065 muted (white only) */
  --bf-hairline:var(--wp--preset--color--hairline);   /* #E3E9DF borders */
  --bf-error:var(--wp--preset--color--error);         /* #B42318 */

  /* ---- Soft green surfaces (tinted beds/chips/borders; shared by The Journal,
     chips and editorial furniture — the green analogues of paper/mint/hairline) ---- */
  --bf-green-tint:#F6FAF2;   /* tinted bed: key-takeaways, author box */
  --bf-green-chip:#EEF5E9;   /* chip / pill background */
  --bf-green-line:#DCE9D2;   /* soft green hairline on tinted surfaces */

  /* ---- Typography ---- */
  --bf-font-head:var(--wp--preset--font-family--heading);
  --bf-font-body:var(--wp--preset--font-family--body);
  /* type scale (mobile → desktop), brand §05 */
  --bf-fs-display:clamp(2rem,1.4rem + 3vw,3.5rem);      /* 32→56 */
  --bf-fs-h1:clamp(2rem,1.4rem + 3vw,3.5rem);
  --bf-fs-h2:clamp(1.625rem,1.3rem + 1.6vw,2.375rem);  /* 26→38 */
  --bf-fs-h3:clamp(1.125rem,1.05rem + 0.4vw,1.375rem); /* 18→22 */
  --bf-fs-section:clamp(1.5rem,1.3rem + 0.55vw,1.8125rem); /* 24→29 homepage block heading */
  --bf-fs-body:clamp(1rem,0.98rem + 0.1vw,1.0625rem);  /* 16→17 */
  --bf-fs-ui:clamp(0.9375rem,0.92rem + 0.1vw,1rem);    /* 15→16 */
  --bf-fs-eyebrow:clamp(0.6875rem,0.66rem + 0.1vw,0.75rem); /* 11→12 */
  --bf-lh-tight:1.05; --bf-lh-head:1.15; --bf-lh-body:1.6;
  --bf-track-tight:-0.005em; --bf-track-eyebrow:0.12em;
  /* heading weights — Fjalla One is single-weight (400); 500 used for h3 sub-heads */
  --bf-fw-head:400; --bf-fw-subhead:500;

  /* ---- Spacing scale (mirrors theme.json spacingSizes) ---- */
  --bf-space-1:0.5rem; --bf-space-2:1rem; --bf-space-3:1.5rem;
  --bf-space-4:2.5rem; --bf-space-5:4rem; --bf-space-6:6rem;
  --bf-section-y:clamp(2.5rem,5vw,5rem);   /* vertical rhythm between sections */
  --bf-gutter:clamp(1rem,5vw,2rem);        /* page side padding (matches theme.json) */

  /* ---- Radii ---- */
  --bf-radius:4px;        /* unified corner radius — buttons, fields, panels, cards */
  --bf-radius-sm:4px;     /* aliased to --bf-radius for a single site-wide radius */
  --bf-radius-pill:999px; /* chips, pills, badges (intentionally fully rounded) */

  /* ---- Shadows ---- */
  --bf-shadow-card:0 2px 4px rgba(0,0,0,.1);
  --bf-shadow-card-hover:0 10px 24px rgba(20,20,20,.12);
  --bf-shadow-seg:0 1px 2px rgba(0,0,0,.05);
  --bf-shadow-panel:0 14px 40px -28px rgba(20,58,36,.42); /* boxed panels: article hero, review, ingredient */

  /* ---- Buttons ---- */
  --bf-btn-bg:var(--bf-green); --bf-btn-label:var(--bf-white);
  --bf-btn-bg-hover:var(--bf-green-hover); --bf-btn-bg-active:var(--bf-green-deep);
  --bf-btn-pad-y:0.7em; --bf-btn-pad-x:1.6em;

  /* ---- Layout ---- */
  --bf-container:1280px; --bf-container-narrow:760px;
  --bf-z-sticky:50; --bf-z-overlay:100; --bf-z-badge:5;
  --bf-transition:.18s ease;
}