/* tokens.css — design tokens lifted 1:1 from the approved Claude Design
   (plans/260822-2115-khoma-telegram-miniapp-shop/reference/design/kho-ma-hot.dc.html).
   Fonts: Lexend (headings/prices), Be Vietnam Pro (body). */

:root {
  --brand: #FF5500;
  --brand-d: #E64A00;
  --brand-50: #FFF2EA;
  --brand-100: #FFDFCC;
  --bg: #F7F5F2;
  --surface: #FFFFFF;
  --text: #1A1614;
  --muted: #776E66;
  --line: #EBE5DE;
  --ok: #0E8F63;
  --ok-50: #E7F6F0;
  --ok-fg: #0B6E4D;
  --warn: #A9700B;
  --warn-50: #FDF3E2;
  --warn-fg: #6B4708;
  --dan: #D22B2B;
  --dan-50: #FDEDED;
  --dan-fg: #8E1F1F;
  --neutral-50: #F1ECE6;
  --neutral-fg: #776E66;
  --r1: 10px;
  --r2: 16px;
  --r3: 22px;
  --sh1: 0 1px 2px rgba(26, 22, 20, .05);
  --sh2: 0 10px 30px -12px rgba(26, 22, 20, .22);
  --font-head: 'Lexend', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- type scale (audited 260824 against the approved reference design —
     plans/260822-2115-khoma-telegram-miniapp-shop/reference/design/kho-ma-hot.dc.html.
     Every distinct font-size in app/static/*.css maps to one of these; a
     step used by only 1-2 rules still gets a name so the whole scale (not
     just the popular steps) stays swappable from one place. ---- */
  --fs-price-lg: 28px;   /* checkout QR amount */
  --fs-hero: 22px;       /* home hero title · detail order total */
  --fs-display: 20px;    /* detail product name · qty stepper +/- */
  --fs-heading: 19px;    /* success/delivery hero title */
  --fs-title: 18px;      /* shared gradient header title (detail/pay/orders/admin) */
  --fs-heading-sm: 17px; /* modal / empty-state / policy-sheet heading */
  --fs-subtitle: 16px;   /* tx-amount (admin) */
  --fs-amount-sm: 15.5px;/* btn-primary label · order-row amount · success code */
  --fs-amount: 15px;     /* pay-row value · admin order amount */
  --fs-body-lg: 14.5px;  /* product card title · CTA buttons · bank-apps title */
  --fs-body: 14px;       /* default paragraph / body text */
  --fs-mono: 13.5px;     /* default monospace field size (stock textarea, order code) */
  --fs-label: 13.5px;    /* row label · section title · chip/tab text */
  --fs-note: 13px;       /* secondary notice copy */
  --fs-caption: 12.5px;  /* muted hint/caption (qr-hint, bank-apps-sub, .muted, ...) */
  --fs-small: 12px;      /* fine timestamps/meta */
  --fs-pill: 11.5px;     /* status pill · fine print */
  --fs-micro: 11px;      /* nav label · section eyebrow */

  --lh-tight: 1.25;   /* detail-name */
  --lh-snug: 1.35;    /* card/order/admin-order title */
  --lh-normal: 1.5;   /* notices, empty-state body */
  --lh-relaxed: 1.55; /* detail desc, paid-note, modal body */
  --lh-loose: 1.6;    /* howto-box, policy-body */

  /* text-on-tint colours (not in the base palette above but reused across
     several tinted cards/panels — kept as tokens so `color:#hex` never
     drifts silently again). */
  --ink-soft: #4C453F;      /* body text on cream/neutral panels (howto, policy, notices, tx-memo) */
  --brand-ink: #7A4A2B;     /* text on brand-50 panels (detail total-row) */
  --brand-ink-soft: #8A5A38;/* secondary text on brand-50 panels (total-save) */
  --icon-muted: #8A8177;    /* inactive nav icon (lighter than --muted) */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); height: 100%; }
/* Document never scrolls (Telegram WebView "lướt không được" fix): only the
   .scroll region inside each screen scrolls. Also kills the white gutter —
   that was the document's own scrollbar reserving space. */
html { overflow: hidden; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
body { overflow: hidden; width: 100%; min-width: 0; scrollbar-width: none; }
body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; text-align: left;
}
input, textarea { font: inherit; color: inherit; }
a { color: var(--brand-d); text-decoration: none; }
a:hover { color: var(--brand-d); text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(255, 85, 0, .6); outline-offset: 2px; border-radius: 6px; }

.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { width: 0; height: 0; }

@keyframes shimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
@keyframes sheetUp { from { transform: translateY(24px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}