/* css/variables.css — design tokens.
   "Function" (apothecary journal) palette — warm parchment canvas, terracotta
   seal accent, Financier Display serif reserved for one emotional/italic
   word per heading, Ftbase (Inter) sans for everything functional. Replaces
   the earlier "Мастерская" (Atelier) stone/fig tokens with the direction
   chosen after the DESIGN_ver4.md mockup round — see design_ver4.md for the
   full style reference this was derived from. */
:root {
  --color-bg: #FEF9EF;              /* Parchment Canvas — page background */
  --color-text: #2A2B2F;            /* Ink — primary text */
  --color-accent-detail: #F5EEE1;   /* Aged Paper — card/panel surface, one step up from canvas */
  --color-accent-fill: #B05A36;     /* Terracotta Seal — CTAs, eyebrow labels, active states */
  --color-card-bg: #FFFFFF;         /* kept for the rare true-white surface (checkout modal) */
  --color-mustard: #B05A36;         /* legacy hand-note token — now points at terracotta, see note below */
  --color-muted: #515151;           /* Graphite — secondary/muted text */
  --color-charcoal: #333333;        /* Charcoal — body copy on parchment */
  --color-taupe: #D1C9BF;           /* Warm Taupe — hairlines, dividers, card outlines */
  --color-ash: #808988;             /* Ash — input borders, disabled/placeholder */

  --font-heading: 'Alegreya', Georgia, 'Times New Roman', serif;      /* Financier Display substitute */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Ftbase substitute */
  --font-hand: 'Alegreya', Georgia, serif; /* was Caveat script — dropped, see note below */

  --radius-button: 8px; /* was 40px (full pill) — squared-off "ink label" shape, see components.css */
  --radius-card: 24px;
  --radius-pill: 9999px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* Type scale — 5 static roles + h1/h2's existing clamps. Replaces 17-18
     hand-typed literal font-sizes (0.65rem .. 1.4rem) that had accumulated
     with no shared rule — see .impeccable/critique/2026-08-24T18-51-02Z__index-html.md
     for the audit that found them. */
  --text-label: 0.75rem;      /* micro-labels, badges, eyebrows */
  --text-caption: 0.85rem;    /* metadata: purchase counts, guarantees, footnotes */
  --text-body-lg: 1.1rem;     /* lead paragraphs, trust lines */
  --text-card-title: 1.4rem;  /* product/bundle card titles — replaces 1.3rem + 1.4rem + the h3 clamp on cards */

  --max-width: 1280px;

  /* Mobile layout breakpoint. Read once at runtime by catalog.js's
     isMobile() so the JS side of the mobile product modal never drifts from
     this value — but CSS custom properties can't be used inside @media
     conditions, so the three `@media (max-width: 720px)` rules in
     sections.css still repeat the literal pixel value. Keep all of these in
     sync if this ever changes: --breakpoint-mobile here, the @media rules
     in sections.css (search "keep in sync with --breakpoint-mobile"), and
     catalog.js's MOBILE_BREAKPOINT_PX. */
  --breakpoint-mobile: 720px;
}

/* Notes on tokens carried over from the old system that no longer map 1:1:
   - --color-mustard: the old system used a mustard hand-annotation color
     with the Caveat script font (a whimsical hand-drawn touch). Function's
     Do's forbid a second accent color and restrict its two type families to
     Ftbase (UI) and Financier Display (editorial headlines only) — there is
     no script-font slot in the system. The hand-note annotation was dropped
     from the hero (see sections.css); --font-hand now just aliases the
     serif so any markup that still references it renders in-system instead
     of breaking. */