/* Design tokens of Artur's Telegram Mini Apps (IG Scout for Maryam, DSH bot): one family, one file.
   Source of truth: ig-scout/src/miniapp/web/tokens.css. Copy it as is; change it here and tell the other app.

   Rules of the family
   - Colors come only from Telegram's theme (themeParams, exposed by telegram-web-app.js as --tg-theme-* variables),
     so light, dark and custom themes follow the user's Telegram. The fallbacks are Telegram's own iOS day theme, for
     a plain browser. Our own hues are only the two status colors (--good, --warn) and tints mixed from --text.
   - Grouped iOS-like layout: page on --bg (secondary_bg_color), content in --card blocks (section_bg_color), hairline
     separators inside a block, uppercase section headers above blocks. No gradients, glass, glow or emoji icons;
     icons are 2 px stroke SVGs in currentColor.
   - Set the app's header, background and bottom bar to secondary_bg_color (setHeaderColor, setBackgroundColor,
     setBottomBarColor), so Telegram's chrome and the page are one surface.
   - The page's main action is Telegram's MainButton; going back is Telegram's BackButton. In-page buttons are for
     several equal choices (e.g. verdicts) and secondary actions.
   - Haptics: impactOccurred('light') on taps, selectionChanged on toggles and tabs, notificationOccurred('success' |
     'warning' | 'error') for outcomes.
   - Numbers use tabular figures (.num). Copy is short and plain, sentence case.
   html[data-scheme] is set from Telegram.WebApp.colorScheme (and on themeChanged). */
:root {
  /* ---- color: Telegram theme ---- */
  --bg: var(--tg-theme-secondary-bg-color, #efeff4);        /* page */
  --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff)); /* blocks, sheets, controls */
  --text: var(--tg-theme-text-color, #000000);
  --hint: var(--tg-theme-hint-color, #8e8e93);              /* captions, inactive */
  --sub: var(--tg-theme-subtitle-text-color, var(--hint));  /* secondary lines */
  --link: var(--tg-theme-link-color, #2481cc);
  --accent: var(--tg-theme-accent-text-color, var(--link)); /* tappable text */
  --btn: var(--tg-theme-button-color, #2481cc);             /* primary fill, badges */
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #e53935);
  --head: var(--tg-theme-section-header-text-color, var(--hint)); /* section headers */
  --sep: var(--tg-theme-section-separator-color, rgba(60, 60, 67, .14));
  /* ---- color: status and tints (ours) ---- */
  --good: #1f9d55;                                          /* passed, fit, done */
  --warn: #c77700;                                          /* check this, possible */
  --soft: color-mix(in srgb, var(--text) 6%, transparent);  /* tracks, chips, segmented control */
  --softer: color-mix(in srgb, var(--text) 4%, transparent);/* tiles inside a card, pressed rows */
  --on: var(--card);                                        /* selected segment (lighter than --card when dark) */
  /* ---- type ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, Roboto, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* logs, ids, code */
  --fs-xs: 11px;    /* tiny captions under numbers */
  --fs-s: 12px;     /* tags, labels, section headers (uppercase, +.03em) */
  --fs-sm: 13px;    /* secondary lines */
  --fs-body: 15px;  /* body, line-height 1.4 */
  --fs-m: 16px;     /* row titles, buttons */
  --fs-l: 18px;     /* card title */
  --fs-num: 21px;   /* big numbers in tiles */
  --fs-xl: 22px;    /* stats, sheet numbers */
  --fs-title: 26px; /* page title, -0.02em */
  --fw-medium: 550; --fw-semi: 600; --fw-bold: 700;
  /* ---- shape ---- */
  --radius: 14px;        /* cards and blocks */
  --radius-s: 10px;      /* tiles, notes, small buttons */
  --radius-btn: 13px;    /* bottom action buttons */
  --radius-sheet: 18px;  /* bottom sheet top corners */
  --radius-pill: 999px;  /* chips, badges */
  /* ---- space ---- */
  --page-x: 14px;        /* page side padding */
  --pad-card: 16px;      /* inside a card */
  --row-y: 12px;         /* list row vertical padding */
  --gap: 8px;            /* between tiles, chips, buttons */
  --section-gap: 22px;   /* above a section header */
  --maxw: 560px;         /* content width on tablets and desktop */
  /* ---- controls ---- */
  --tap: 50px;           /* bottom buttons (MainButton is the same height) */
  --tap-min: 44px;       /* smallest tap target; in-page buttons */
  --seg-h: 34px;         /* segmented control */
  --icon: 18px;          /* inline SVG icons: 2 px stroke, currentColor, round caps */
  /* ---- motion ---- */
  --dur: .22s;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  /* ---- safe areas (fullscreen and notches) ---- */
  --safe-b: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-t: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  color-scheme: light dark;
}
html[data-scheme="dark"] {
  --good: #45c97a;
  --warn: #f0a63a;
  --sep: var(--tg-theme-section-separator-color, rgba(255, 255, 255, .1));
  --on: color-mix(in srgb, var(--text) 16%, var(--card));
}