/* GENERATED by _src/css_system.py: tokens. Edit _src/css/ (system) or _src/css/legacy/ (legacy, being retired), then rebuild. */
/* Brand Tested design tokens. The only file that defines color, type, spacing, radius, shadow, motion and breakpoints.
   Spec: /workspace/brandtested_design_audit_oct11.md section 3. Breakpoints: mobile <600, tablet P 600-899,
   tablet L 900-1199, desktop 1200+ (CSS custom properties can't be used inside @media, so every media query in
   the system uses exactly 599.98 / 600, 899.98 / 900 and 1199.98 / 1200). */
:root{
  /* ---- color roles ---- */
  --ink:#16120F;          /* text, black pills, dark bands, card strokes. The only black */
  --ink-2:#3D342E;        /* secondary text on paper and white */
  --muted:#6D625A;        /* captions and meta; never lighter for text (5.6:1 on paper) */
  --line:#E9E2DA;         /* hairlines, input borders at rest, dividers */
  --line-strong:#D6CCC1;
  --paper:#FFF8EF;        /* page background everywhere */
  --paper-2:#FFF1DE;      /* a deeper paper for tinted bands and hovers */
  --surface:#FFFFFF;      /* cards, inputs, modals */
  --orange:#FF5C39;       /* the one action color: primary fills (ink label 6.07:1), the stamp, stickers */
  --orange-hover:#F04A26;
  --orange-type:#EB4523;  /* the accent word in headlines (large text: 3.7:1 on paper, 3:1 over the pastel blobs) */
  --orange-ink:#B93815;   /* orange as small text: links in articles, error text (5.5:1) */
  --butter:#FFE08A; --pink:#FFB3CF; --mint:#9BE3C3; --sky:#A9D4FF; --lilac:#D2C2FF; --peach:#FFC9A8;   /* pastels: backgrounds only */
  --success:#1A7F4B;
  --focus:var(--orange);
  --scrim:rgba(22,18,15,.55);
  /* category pastels (one per category, forever) */
  --cat-food-beverage:var(--butter); --cat-apparel:var(--butter);
  --cat-health-wellness:var(--pink); --cat-pets:var(--pink);
  --cat-supplements:var(--mint); --cat-baby-kids:var(--mint);
  --cat-skincare:var(--sky); --cat-accessories-jewelry:var(--sky);
  --cat-beauty:var(--lilac); --cat-fitness:var(--lilac);
  --cat-home-goods:var(--peach); --cat-personal-care:var(--peach);

  /* ---- type faces: three, each with one job ---- */
  --font-display:'Bricolage Grotesque','BT Display Fallback',system-ui,sans-serif;   /* headlines, names, numerals, nav, buttons 15px+ */
  --font-accent:'Fraunces','BT Accent Fallback',Georgia,serif;                        /* italic 500 only: the accent word, pull quotes */
  --font-body:Inter,'BT Body Fallback',system-ui,-apple-system,'Segoe UI',sans-serif; /* body, UI, eyebrows, captions, forms */
  --font-ui:var(--font-body);
  /* Breakdowns and Reads: Cam chose the site faces (Oct 11). These two tokens are the only switch the article template reads. */
  --font-article-head:var(--font-display);
  --font-article-body:var(--font-body);
  --font-card-name:var(--font-display);   /* spec: Bricolage 700 on cards. One-line revert to the old card names: var(--font-accent) */

  /* ---- type scale (desktop 1200+; the media blocks below step it down) ---- */
  --fs-display-xl:128px; --lh-display-xl:.92; --tr-display-xl:-.045em;
  --fs-display-l:96px;   --lh-display-l:.95;  --tr-display-l:-.04em;
  --fs-h1-article:64px;  --lh-h1-article:1.02; --tr-h1-article:-.03em;
  --fs-h2:56px;          --lh-h2:1;           --tr-h2:-.035em;
  --fs-h3:28px;          --lh-h3:1.12;        --tr-h3:-.02em;
  --fs-h4:20px;          --lh-h4:1.2;         --tr-h4:-.01em;
  --fs-lead:22px;        --lh-lead:1.5;
  --fs-body:17px;        --lh-body:1.6;
  --fs-body-article:18.5px; --lh-body-article:1.6;   /* Cam, Oct 11: 18.5 desktop, 17 mobile, 650px column */
  --fs-small:14px;       --lh-small:1.45;
  --fs-caption:13px;     --lh-caption:1.4;
  --fs-eyebrow:12px;     --tr-eyebrow:.12em;
  --fs-score-xl:176px; --fs-score-m:44px; --fs-score-s:20px;
  --fs-button:17px;
  /* fixed steps used by tokenized legacy rules */
  --fs-eyebrow-m:11px; --fs-body-m:16px; --fs-h4-m:18px;
  --measure-article:650px; --measure-lead:56ch;

  /* ---- spacing (base 4) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;
  --section-y:128px; --section-head:48px; --dek-gap:16px; --action-gap:32px; --card-pad:24px; --gap:24px; --article-p:24px; --article-fig:48px;
  --margin:40px; --container:1200px; --header-h:64px;

  /* ---- radii ---- */
  --r-sm:12px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
  --r-card:var(--r-lg); --r-input:var(--r-md); --r-modal:var(--r-xl);

  /* ---- shadows: three elevations plus the card hover ---- */
  --sh-1:0 1px 2px rgba(22,18,15,.06),0 4px 12px -6px rgba(22,18,15,.14);
  --sh-2:0 1px 0 rgba(22,18,15,.04),0 18px 40px -20px rgba(22,18,15,.28);
  --sh-3:0 30px 60px -24px rgba(22,18,15,.35);
  --sh-hover:0 16px 40px rgba(22,18,15,.12);
  --stroke-card:1px solid rgba(22,18,15,.08);

  /* ---- motion ---- */
  --dur-fast:160ms; --dur-enter:320ms; --dur-hero:600ms;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-spring:cubic-bezier(.3,1.4,.5,1);

  /* ---- control sizes ---- */
  --tap:44px; --btn-h:56px; --input-h:72px; --field-h:52px; --chip-h:36px;
}
@media (max-width:1199.98px){:root{
  --fs-display-xl:104px; --fs-display-l:80px; --fs-h1-article:56px; --fs-h2:48px; --fs-h3:26px; --fs-lead:21px;
  --fs-score-xl:152px; --section-y:96px; --section-head:40px; --gap:24px; --margin:40px;
}}
@media (max-width:899.98px){:root{
  --fs-display-xl:80px; --fs-display-l:64px; --fs-h1-article:46px; --fs-h2:40px; --fs-h3:24px; --fs-h4:18px; --fs-lead:20px;
  --fs-score-xl:128px; --fs-score-m:40px; --fs-score-s:18px; --gap:20px; --margin:32px;
}}
@media (max-width:599.98px){:root{
  --fs-display-xl:56px; --fs-display-l:46px; --fs-h1-article:36px; --fs-h2:34px; --fs-h3:22px; --fs-lead:18px; --fs-body:16px;
  --fs-body-article:17px; --fs-eyebrow:11px; --fs-score-xl:104px; --fs-score-m:36px; --fs-button:16px;
  --section-y:64px; --section-head:32px; --dek-gap:12px; --action-gap:24px; --card-pad:20px; --gap:16px; --article-p:20px; --article-fig:32px;
  --margin:20px; --btn-h:52px; --input-h:60px;
}}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:120ms; --dur-enter:120ms; --dur-hero:120ms}}
/* aliases for inline styles and scripts written before the token file (do not use in new CSS) */
:root{--disp:var(--font-display);--sans:var(--font-body);--serif:var(--font-accent);--mono:var(--font-ui);--pop:var(--orange);--sun:var(--butter);--cream:var(--paper-2);--accent:var(--orange-ink)}