/* Design tokens — the single source for colour, type and spacing.
 *
 * Colours are lifted verbatim from what already runs in production:
 *   calorybot_billing/src/pay/index.html:10-24
 *   calorybot/src/webapp/static/index.html:12-32
 * Do not invent new ones here: the user walks quiz -> Impaya form -> bot, and one
 * palette across that whole path is what keeps the most expensive step trustworthy.
 */
:root {
  /* ── surfaces ───────────────────────────────────────────────────────────── */
  --bg: #FBFAF7;              /* warm cream — page */
  --panel: #FFFFFF;           /* action surface — bottom panel */
  --card: #FFFFFF;            /* content surface */
  --field: #F4F2EC;           /* quiet inset — inputs, steppers, tracks */
  --hair: #EDEBE3;            /* hairline border */

  /* ── ink ────────────────────────────────────────────────────────────────── */
  --ink: #16181B;
  --ink-soft: #5B5F57;
  --muted: #9DA29A;
  --chev: #CFD2C9;

  /* ── accent — exactly one, and only on the action ───────────────────────── */
  --green: #2E9E4F;
  --green-deep: #23823E;
  --green-wash: #F4FBF6;      /* selected option background */
  --gold: #E8B53A;

  /* ── consent block — deliberately quiet (bank pattern) ──────────────────── */
  --ring: #DBDED5;
  --consent: #B4B6AD;

  /* ── macros ─────────────────────────────────────────────────────────────── */
  --p: #E0795E;               /* белки — terracotta */
  --f: #E8B53A;               /* жиры — gold */
  --c: #4F86C6;               /* углеводы — calm blue */
  --over: #E0795E;
  --under: #E8B53A;
  --ok: #2E9E4F;
  --danger-wash: #FBEEEA;

  /* ── elevation — flat and warm; no big blurred shadows (§8.2) ───────────── */
  --shadow: 0 2px 16px rgba(20, 22, 18, .05);
  --shadow-row: 0 1px 10px rgba(20, 22, 18, .04);
  --shadow-btn: 0 8px 20px -6px rgba(46, 158, 79, .35), 0 2px 6px rgba(46, 158, 79, .16);
  --shadow-panel: 0 -12px 30px -6px rgba(20, 22, 18, .05);

  /* ── type ───────────────────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  /* Five steps total. Rule from §8.2: no more than two of them on one screen. */
  --fs-display: clamp(27px, 7.6vw, 32px); /* screen headline */
  --fs-title: 21px;                        /* card / section headline */
  --fs-body: 15px;                         /* option labels, copy */
  --fs-meta: 12.5px;                       /* secondary line under a label */
  --fs-micro: 11px;                        /* consent, legal */

  /* ── 4px grid ───────────────────────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* ── radius ─────────────────────────────────────────────────────────────── */
  --r-card: 24px;
  --r-row: 16px;
  --r-btn: 14px;
  --r-pill: 999px;

  /* ── layout ─────────────────────────────────────────────────────────────── */
  --w-app: 520px;             /* content column; mobile-first from 375px */
  --sheet: env(safe-area-inset-bottom, 0px);
  --tap: 44px;                /* minimum tappable side (§8.3) */
}