/* SHELEG Design — Orchard token layer (friendly consumer-biotech / DTC wellness).
   Copy verbatim; consume only var(--…) in components.
   The page is a stack of rounded slabs on a warm oat field. Sage is the brand,
   candy orange is the single action colour, and neither is a text colour —
   see the contrast notes, they are the part of this pack most often broken. */
:root {
  /* ---- Field & slabs --------------------------------------------------- */
  --bg: #fffef4; /* the field the slabs sit on — warm, yellow-cast near-white */
  --surface: #f6ecdc; /* oat: the default slab and card fill */
  --surface-2: #fbf7ea; /* the lighter pill (nav, floating chips) */
  --surface-ink: #3a1b13; /* cacao slab — inverted sections and selected chips */
  --line: #e3d7c8; /* hairline on oat */

  /* ---- Ink ------------------------------------------------------------- */
  --ink: #3a1b13; /* cacao, not black — 15.4:1 on --bg, 13.3:1 on --surface */
  --ink-soft: rgba(58, 27, 19, 0.6); /* 4.1:1 on oat — NOT body copy */
  --on-ink: #fffef4;
  --on-primary: #fffef4; /* only on --primary-deep, never on --primary */

  /* ---- Brand green ----------------------------------------------------- */
  /* @role non-text: --primary, --cta — sage at 3.42:1 on --bg and the candy orange at 2.75:1
     are fills and large-text colours, which both declarations already say; --primary-deep
     is the text-safe green at 4.9:1. */
  --primary: #78934a; /* sage — 3.4:1 on --bg: a FILL and large-text colour */
  --primary-deep: #61783b; /* the text-safe green: 4.9:1 on --bg under --on-primary */
  --primary-light: #aaca73; /* the mark / illustration green */
  --primary-tint: rgba(120, 147, 74, 0.1); /* quiet rows and a quiet row's hover */
  /* MEASURED 2026-08-26 by hovering the reference's own sage control in a browser:
     the fill does not darken or tint, it INVERTS to a warm cream. A fetch cannot see
     this and the earlier passes did not. A fill, never text. */
  --primary-hover: #f9eedc; /* 1.13:1 on --bg */
  /* MEASURED the same pass — the hero slab's fill, one element, 892px tall against a
     900px viewport. A fill, never text. */
  --surface-warm: #f7ecdc; /* 1.15:1 on --bg */

  /* ---- The one action colour ------------------------------------------- */
  --cta: #fa7241; /* candy orange — 2.8:1 on --bg: a fill only, never text */
  --cta-ink: #3a1b13; /* label ON the CTA — 5.6:1. White here fails AA. */
  --cta-glow: rgba(250, 114, 65, 0.25);
  --cta-sheen: radial-gradient(
    50% 50%,
    #fa7241 0%,
    rgba(250, 114, 65, 0.01) 100%
  );

  /* ---- Soft-3D: the pill's whole material is two inset hairlines -------- */
  --bevel-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
  --bevel-bottom: inset 0 -1px 0 0 rgba(255, 255, 255, 0.35);
  --shadow-cta: var(--bevel-top), var(--bevel-bottom), 0 9px 14px 0 var(--cta-glow);
  --shadow-pill: var(--bevel-top), var(--bevel-bottom);
  --shadow-card: 0 1.4px 1.4px 0 rgba(0, 0, 0, 0.02); /* barely there, on purpose */
  --glass-blur: blur(20px);

  /* ---- Radii — nothing in this system has a sharp corner --------------- */
  --radius-sm: 6px;
  --radius-md: 12px; /* the default: cards, panels, most slabs */
  --radius-lg: 20px; /* media cards, chips */
  --radius-xl: 24px; /* the full-bleed section slab */
  --radius-pill: 999px; /* every button and nav */

  /* ---- Spacing: an 8-based ramp with two named section rhythms --------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 36px; /* card padding */
  --s7: 44px; /* gap between blocks inside a section */
  --s8: 64px; /* section slab padding */
  --section-pad: var(--s8) var(--s5); /* 64px 24px — the page's whole rhythm */
  --section-gap: 55px; /* between full-bleed slabs */
  --page-inset: 8px; /* the field showing around the top slab */
  --content-max: 1232px;

  /* ---- Type ------------------------------------------------------------ */
  /* Display: a rounded geometric with a true Medium. Substitutes with the
     same voice: Poppins, Gilroy, Objektiv Mk1, Nunito Sans (600). */
  --font-display: "Pogonia Medium", "Poppins", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, sans-serif;

  --weight-display: 500; /* Medium — the display face ships one weight */
  --weight-body: 400;
  --weight-body-strong: 500;

  --t-hero: 46px;
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 28px;
  --t-h4: 24px;
  --t-h5: 22px;
  --t-h6: 20px;
  --t-price: 34px; /* the price is set in the BODY face, not the display face */
  --t-lg: 18px;
  --t-body: 16px;
  --t-sm: 14px;
  --t-xs: 12px;

  --lh-display: 1.2; /* every display size, flat */
  --lh-hero: 1.245;
  --lh-body: 1.3; /* 16–18px */
  --lh-body-sm: 1.5; /* 14px and below */

  /* Negative tracking only at 28px and up; below that, normal. */
  --track-display: -0.023em;
  --track-h5: -0.017em;

  /* ---- Motion ---------------------------------------------------------- */
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;
  /* The headline reveal is scrubbed: one word per ~12% of the hero's scroll,
     opacity 0 → 1 only. Nothing translates, nothing scales. */
  --reveal-word-step: 0.12;
  --reveal-floor: 0.001;

  background-color: var(--bg);
  color: var(--ink);
  color-scheme: light;

  /* Core role vocabulary — every pack resolves --bg, --ink and --accent, so a
     cross-pack document can name them truthfully. Alias, never a new colour. */
  /* @role accent: --cta — this pack's ONE functional accent. It is not
     aliased to --accent because that would make it a status peer, and the
     palette gate measures it 5.5 from --danger (hard floor 10). */
}

/* The reference ships NO reduced-motion branch at all. This one is mandatory:
   the scrubbed headline resolves to fully-opaque text and the sticky visual
   column becomes a normal block. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0s;
    --dur-base: 0s;
    --dur-slow: 0s;
    --reveal-floor: 1;
  }
}

/* @adapter — the semantic token contract (FIX-DS-01); see workbench.css for the
   rules. Roles a pack has no concept for are DECLARED absent, never left to the
   silent-fallback behaviour of an undefined custom property. */
:root {
  --sem-surface: var(--bg);
  --sem-surface-raised: var(--surface);
  --sem-text: var(--ink);
  --sem-text-muted: var(--ink-soft);
  --sem-line: var(--line);
  --sem-primary: var(--primary);
  --sem-on-primary: var(--on-primary);
}
/* @absent --sem-positive --sem-caution --sem-negative — orchard is a landing
   pack and ships no status colours; a comparison needing them excludes this
   pack out loud instead of rendering silent fallbacks. */

/* ── components ── */

/* Everything below consumes var(--…) only. Colour never appears as a literal:
   the token block above is the whole palette, and a value with no token is a
   gap in the pack rather than something to inline here. Geometry the pack
   states numerically (16px 24px 14px, 11px, 50px) stays numeric — those are
   the pack's own spec, not colour.

   The "ink on the accent" token the other five kits share does NOT exist in
   this pack. The role is solved here under older names: --cta-ink is the label
   on the candy pill, --on-primary is text on --primary-deep, and --on-ink is
   text on the cacao surface. Reaching for the shared name would leave an
   undefined variable rendering as transparent — .design-sync/conventions.md
   spells that out by name for the design agent. */

/* Heading — the display face is the whole personality: rounded geometric at
   Medium, flat 1.2 leading at every size, negative tracking because the ramp
   starts at 28px and the pack tracks only from there up. */
.orch-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  /* inherit, not var(--ink): a heading inside a cacao Slab has to become
     --on-ink, and the Slab is the thing that knows which fill it is. */
  color: inherit;
  text-wrap: balance;
}
.orch-heading--1 {
  font-size: var(--t-h1);
}
.orch-heading--2 {
  font-size: var(--t-h2);
}
.orch-heading--3 {
  font-size: var(--t-h3);
}

/* Rule — the pack ships one line colour, so `strong` steps to the soft ink
   rather than inventing a second hairline. */
.orch-rule {
  height: 0;
  margin: var(--s5) 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.orch-rule--strong {
  border-top-color: var(--ink-soft);
}

/* Button — `primary` IS the candy pill; there is no separate CandyPill
   component and there must never be a second one on the page. A flat --cta
   fill under the radial sheen, both inset white hairlines plus the ambient
   glow, pill radius, and the asymmetric 16px 24px 14px padding whose extra top
   pad is what centres the label optically. */
.orch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-weight: var(--weight-body-strong);
  line-height: var(--lh-body);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  /* Scoped, never `all`. `color` is in the list because the sage button's
     label has to flip on hover — see .orch-btn--secondary. */
  transition:
    background-color var(--dur-base) var(--motion-ease),
    box-shadow var(--dur-base) var(--motion-ease),
    color var(--dur-base) var(--motion-ease);
}
.orch-btn:focus-visible {
  /* --ink on every variant, including the orange one. A white ring on candy
     orange is the pack's own named mistake. The outline follows the pill. */
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.orch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.orch-btn--sm {
  padding: 12px 18px 10px;
  font-size: var(--t-sm);
}
.orch-btn--md {
  padding: 16px 24px 14px;
  font-size: var(--t-body);
}
.orch-btn--lg {
  padding: 20px 32px 18px;
  font-size: var(--t-lg);
}
.orch-btn--primary {
  background-color: var(--cta);
  background-image: var(--cta-sheen);
  /* --cta-ink, never white: white on candy orange is 2.8:1 and fails AA. */
  color: var(--cta-ink);
  box-shadow: var(--shadow-cta);
}
.orch-btn--primary:hover:not(:disabled) {
  /* The glow grows; the fill does not move and nothing scales — a soft-3D pill
     that also grows reads as a toy. The colour is the same token, only the
     blur and offset change. */
  box-shadow: var(--bevel-top), var(--bevel-bottom), 0 14px 24px 0 var(--cta-glow);
}
.orch-btn--secondary {
  /* The sage pill. Rest is --primary with cacao ink (4.5:1); hover deepens the
     fill to --primary-deep, which forces the label to --on-primary (4.9:1) —
     oat on plain sage is 2.96:1 and would fail even the large-text floor. The
     label swap is the pack's contrast rule, not a flourish. */
  background-color: var(--primary);
  color: var(--ink);
  box-shadow: var(--shadow-pill);
}
.orch-btn--secondary:hover:not(:disabled) {
  background-color: var(--primary-deep);
  color: var(--on-primary);
}
.orch-btn--ghost {
  background-color: transparent;
  color: var(--ink);
  box-shadow: none;
}
.orch-btn--ghost:hover:not(:disabled) {
  background-color: var(--primary-tint);
}
/* The bevel is a highlight on orange and sage and a scratch on cacao, so a
   button sitting on the cacao slab takes a flat fill and no inset hairlines. */
.orch-slab--cacao .orch-btn--secondary,
.orch-slab--cacao .orch-btn--ghost {
  box-shadow: none;
}
.orch-slab--cacao .orch-btn--ghost {
  color: var(--on-ink);
}
.orch-slab--cacao .orch-btn:focus-visible {
  outline-color: var(--on-ink);
}

/* Card — oat on a hairline at the default 12px radius, 36px padding, and the
   one shadow in the system that is almost nothing on purpose. */
.orch-card {
  box-sizing: border-box;
  padding: var(--s6);
  background: var(--surface);
  /* The hairline is what keeps an oat card legible when it sits on an oat
     slab; --shadow-card alone is 2% black and would not separate them. */
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.orch-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.orch-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--t-h6);
  line-height: var(--lh-display);
  /* 20px is below the 28px floor, so tracking stays normal. */
  letter-spacing: normal;
  color: var(--ink);
}
.orch-card__meta {
  font-size: var(--t-sm);
  line-height: var(--lh-body-sm);
  color: var(--ink-soft);
  white-space: nowrap;
}
.orch-card__body {
  display: block;
}

/* Chip — 20px radius, 8px 16px padding, and a selected state that is the cacao
   fill. Sage never becomes text, so `accent` labels sit on --primary-deep. */
.orch-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--s2) var(--s4);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--weight-body-strong);
  line-height: var(--lh-body-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--ink);
}
.orch-chip--neutral {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
.orch-chip--accent {
  background: var(--primary-tint);
  border-color: var(--primary-tint);
  color: var(--primary-deep);
}
.orch-chip--selected {
  background: var(--surface-ink);
  border-color: var(--surface-ink);
  color: var(--on-ink);
}

/* Stat — the value is set in the BODY face, not the display face. A rounded
   display numeral reads as branding; a figure has to read as a fact. */
.orch-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-family: var(--font-sans);
  color: inherit;
}
.orch-stat__value {
  font-size: var(--t-price);
  font-weight: var(--weight-body-strong);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}
.orch-stat__label {
  font-size: var(--t-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
}
.orch-stat__source {
  font-size: var(--t-xs);
  line-height: var(--lh-body-sm);
  color: var(--ink-soft);
}

/* Slab — the composition unit. Rounded, its own fill, inset from the field so
   the field shows around it, 55px of field between one slab and the next.
   Adjacent slabs never repeat a fill; that rule lives in composition and this
   component cannot enforce it — see Slab.md. */
.orch-slab {
  box-sizing: border-box;
  margin: 0 var(--page-inset);
  padding: var(--section-pad);
  border-radius: var(--radius-xl);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
}
.orch-slab + .orch-slab {
  margin-top: var(--section-gap);
}
.orch-slab__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.orch-slab--oat {
  background: var(--surface);
  color: var(--ink);
}
.orch-slab--sage {
  /* --ink on sage is 4.5:1 and passes; --on-primary on sage is 3.4:1 and does
     not. That is why the sage slab sets cacao ink and not oat. */
  background: var(--primary);
  color: var(--ink);
}
.orch-slab--cacao {
  background: var(--surface-ink);
  color: var(--on-ink);
}
/* --ink-soft is cacao at 60% and is defined against oat; on the cacao slab it
   vanishes. The quiet line steps to --on-ink held back, rather than inventing
   a second soft-ink colour the pack does not have. */
.orch-slab--cacao .orch-stat__source,
.orch-slab--cacao .orch-claim__source,
.orch-slab--cacao .orch-card__meta {
  color: var(--on-ink);
  opacity: 0.7;
}

/* ChipRail — the filter rail: 11px gaps, exactly one selected, and it doubles
   as a plain-language list of what the product is for. */
.orch-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}
.orch-rail__chip {
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--motion-ease),
    border-color var(--dur-base) var(--motion-ease),
    color var(--dur-base) var(--motion-ease);
}
.orch-rail__chip:hover:not(.orch-chip--selected) {
  background: var(--primary-tint);
  border-color: var(--primary-tint);
}
.orch-rail__chip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ClaimEvidence — the assertion, then the quieter citation. On a health page
   the second line is the reason the first one is allowed to exist. */
.orch-claim {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.orch-claim__claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--t-h4);
  line-height: var(--lh-display);
  /* 24px, below the 28px tracking floor. */
  letter-spacing: normal;
  color: inherit;
}
.orch-claim__source {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-body-sm);
  color: var(--ink-soft);
}
.orch-claim__cite {
  font-style: normal;
}

/* GlassNav — the floating pill: 50px radius, blur(20px), sticky at top 0, and
   it never changes size on scroll. The blur is the only thing separating it
   from the slab passing underneath. */
.orch-glassnav {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s5);
  box-sizing: border-box;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  background: var(--surface-2);
  border-radius: 50px;
  box-shadow: var(--shadow-pill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* ObjectionSection — a heading in the reader's own words over a plain stack.
   44px between the heading and the stack is the pack's in-section rhythm; the
   craft is in the copy, so there is nothing else here to decorate. */
.orch-objection {
  display: flex;
  flex-direction: column;
  gap: var(--s7);
}
.orch-objection__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--t-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: inherit;
  text-wrap: balance;
}
.orch-objection__stack {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}