/*
 * Design tokens. Brand colors come from two HAUSTER sources:
 *   - the logo (assets/brand/logo.png, from https://hauster.kz/static/img/logo_h.png),
 *     whose pixels were sampled
 *   - https://hauster.kz/ computed styles (getComputedStyle, read-only, 2026-11-03);
 *     selectors in the comments are the site's own class names
 * Layout values (radii, spacing, surfaces) are a modern mobile treatment chosen
 * for the Mini App rather than copied from the desktop-era site, and are marked
 * "design choice". README.md lists them under "Unverified values".
 *
 * Inside Telegram, app.js overrides the tokens marked [tg] with
 * Telegram.WebApp.themeParams. Brand colors are never overridden.
 */
:root {
  /* Brand */
  --brand-ink: #0b070b;       /* logo roof and wordmark, sampled from the logo */
  --brand-cyan: #00b4f8;      /* logo ring, sampled from the logo */
  --brand-cyan-site: #1bb3f5; /* site search border, 1px rgb(27,179,245) */
  --brand-green: #70c1ac;     /* site .btnn ("В корзину") rgb(112,193,172) */
  --brand-grey: #9fa6ad;      /* site .menu_body2 nav bar rgb(159,166,173) */
  --brand-clay: #ba8879;      /* site active category .nav_link.top rgb(186,136,121) */

  /* Text */
  --color-text: #221f1f;        /* [tg] site body rgb(34,31,31) */
  --color-muted: #6d6b6b;       /* [tg] site .kod-title rgb(109,107,107) */
  --color-subtle: #888888;      /* site .service_card description rgb(136,136,136) */

  /* Surfaces */
  --color-bg: #f3f5f7;          /* [tg] design choice: soft page background */
  --color-card: #ffffff;        /* [tg] site .cards background */
  --color-line: #e3e6ea;        /* design choice: lighter than the site's #b4b4b4 card border */
  --color-line-strong: #b4b4b4; /* site .cards border rgb(180,180,180) */
  --color-tint: #e6f7fe;        /* design choice: 10% brand cyan on white */
  --color-green-tint: #e9f6f2;  /* design choice: brand green on white */

  /* Actions */
  --color-primary: var(--brand-ink);  /* main buttons: logo black */
  --color-on-primary: #ffffff;
  --color-add: var(--brand-green);    /* add-to-cart, as on the site */
  --color-on-add: var(--brand-ink);   /* dark text: white on #70c1ac is only 2.2:1 contrast */
  --color-accent: var(--brand-cyan);  /* badges, active states, focus */
  --color-error: #d33a2c;             /* fallback: no error style on the site */
  --color-focus: var(--brand-cyan);

  /* Typography (site body: "SF Pro Display", not downloaded) */
  --font-base: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 11px;
  --fs-s: 13px;   /* site benefit description */
  --fs-m: 15px;   /* site .to-cart-btn */
  --fs-l: 18px;   /* site .categorii_title and nav */
  --fs-xl: 22px;
  --fs-xxl: 26px;

  /* Shape (design choice) */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-pill: 999px;
  --shadow-bar: 0 -1px 0 var(--color-line);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;

  --tap-min: 44px;
  --column-max: 440px;
}