/* Healthy Shop design tokens. Everything visual hangs off these variables. */
:root {
  /* Palette: deep leaf green primary, near black ink, warm citrus accent, soft off white. */
  --green-900: #0f4d2c; --green-700: #167a45; --green-600: #1d8f52; --green-100: #e3f3ea; --green-50: #f0f8f3;
  --ink: #131c17; --ink-2: #3d4a43; --ink-3: #5f6a64; --line: #e4e8e3; --line-strong: #d3d9d3;
  --citrus: #f4a51d; --citrus-100: #fff2d6; --citrus-ink: #7a4d00;
  --bg: #f4f5f1; --card: #ffffff; --card-2: #f8f9f6;
  --primary: var(--green-700); --primary-ink: #ffffff;

  /* Semantic score colors. Text versions pass AA on white, fills carry ink text on light tints. */
  --excellent: #1b7f3b; --excellent-2: #4fb26f; --excellent-tint: #e3f3ea;
  --verygood: #24784a; --verygood-2: #6cc28f; --verygood-tint: #e6f4ec;
  --good: #5f7a12; --good-2: #9cbf2c; --good-tint: #eef4dc;
  --bad: #c8401c; --bad-2: #f07a58; --bad-tint: #fdeae4;
  --warn-bg: #fff4e5; --warn-ink: #7a4d00; --ok-bg: #e9f6ee; --ok-ink: #14532d;

  /* Type: system stack, tabular numerals for scores and prices. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: 32px/38px; --title: 22px/28px; --headline: 17px/22px; --body: 16px/22px; --caption: 13px/18px;
  --track-tight: -0.02em; --track-caps: 0.06em;

  /* 4 point grid, radii, shadows, hairlines. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --r1: 12px; --r2: 20px; --r3: 28px; --r-pill: 999px;
  --shadow-rest: 0 1px 2px rgba(19,28,23,0.06), 0 2px 8px rgba(19,28,23,0.06);
  --shadow-raised: 0 6px 18px rgba(19,28,23,0.14), 0 2px 6px rgba(19,28,23,0.08);
  --hairline: 1px solid var(--line);
  --tap: 44px;

  /* Motion. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.4, 1);
  --t-fast: 120ms; --t-route: 180ms; --t-sheet: 320ms;
}

.tier-excellent { --tier: var(--excellent); --tier-2: var(--excellent-2); --tier-tint: var(--excellent-tint); }
.tier-verygood { --tier: var(--verygood); --tier-2: var(--verygood-2); --tier-tint: var(--verygood-tint); }
.tier-good { --tier: var(--good); --tier-2: var(--good-2); --tier-tint: var(--good-tint); }
.tier-bad { --tier: var(--bad); --tier-2: var(--bad-2); --tier-tint: var(--bad-tint); }

.t-display { font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: var(--track-tight); }
.t-title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.t-headline { font-size: 17px; line-height: 22px; font-weight: 600; }
.t-body { font-size: 16px; line-height: 22px; }
.t-caption { font-size: 13px; line-height: 18px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--ink-3); }