/* Design tokens — single source of truth for colour / spacing /
 * radius / font / shadow / motion across the app.
 *
 * Architecture (v0.3.32.7, R1):
 *   tokens.css  — :root vars + dark-mode + explicit theme overrides
 *   app.css     — everything else (components, pages, features)
 *
 * Both are loaded by base.html via separate <link> tags in order
 * (tokens.css FIRST so app.css can reference the vars).  The
 * cascade order is identical to the previous monolithic app.css —
 * this is pure refactor with no behaviour change.
 *
 * New code MUST reach for a token before introducing a raw px /
 * #hex / s value.  The Telegram theme vars (--tg-*) are still
 * pushed dynamically by tma.js at runtime.
 */

/* Telegram Mini App look + browser fallback.
 * All colours come from `tma.js` which writes theme params into CSS vars.
 * Fallbacks below match Telegram's default light theme.
 */
:root {
  --tg-bg: #ffffff;
  --tg-text: #000000;
  --tg-hint: #707579;
  --tg-link: #2481cc;
  --tg-button: #2481cc;
  --tg-button-text: #ffffff;
  --tg-secondary-bg: #f4f4f5;
  --tg-section-bg: #ffffff;
  --tg-section-sep: #c8c7cc;
  --tg-accent: #2481cc;
  --tg-destructive: #ff3b30;

  /* v0.1.6: semantic palette referenced by the newer cards.  These
   * are derived from --tg-* so a tma.js theme push (light → dark)
   * keeps everything in lockstep.  Translucent backgrounds use the
   * `*-soft` variants so the contrast vs --tg-section-bg stays
   * legible in either theme. */
  --tg-positive:        #34c759;
  --tg-positive-soft:   rgba(52, 199, 89, 0.14);
  --tg-warning:         #ff9500;
  --tg-warning-soft:    rgba(255, 149, 0, 0.14);
  --tg-destructive-soft: rgba(255, 59, 48, 0.14);
  --tg-accent-soft:     rgba(36, 129, 204, 0.14);
  /* v0.3.35.12 — "informational, waiting on external state" palette.
   * Distinct from warning (orange = something to watch) and accent
   * (blue = primary action).  iOS system-purple chosen so the
   * awaiting-source pill reads as "neutral wait" vs the alarming red
   * overdue or amber dispute. */
  --tg-info:            #af52de;
  --tg-info-soft:       rgba(175, 82, 222, 0.18);

  /* v0.1.6.x: 4-level severity palette for the Problems chip + modal.
   * critical is a deeper red than the standard destructive so the two
   * stay visually distinct when stacked.  notice is a soft amber —
   * loud enough to draw attention but not the same urgency as warning. */
  --tg-critical:        #c41e1a;
  --tg-critical-soft:   rgba(196, 30, 26, 0.18);
  --tg-notice:          #f5b800;
  --tg-notice-soft:     rgba(245, 184, 0, 0.16);

  /* v0.3.32 (UI-N1) — design tokens.  Pre-token the file carried 19
     distinct font sizes (9.5..22 px) and a long tail of hardcoded
     padding tuples; these tokens collapse the scale to 6 sizes / 6
     spacing steps / 4 radii.  Existing per-component rules are
     migrated incrementally — new code MUST reach for these tokens
     before introducing new raw values. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-meta: 11.5px;
  /* Elevation tokens for boxes that float above the page. */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
  /* Motion tokens — durations + easings used across the app. */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark-mode safety: when Telegram (or the OS) hands us a dark theme,
 * --tg-bg / --tg-text invert.  The translucent semantic backgrounds
 * read as too bright on dark grounds, so tone them down here.  Pure
 * accent colours stay vivid — they're meaningful regardless of theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --tg-positive-soft:    rgba(52, 199, 89, 0.22);
    --tg-warning-soft:     rgba(255, 149, 0, 0.22);
    --tg-destructive-soft: rgba(255, 59, 48, 0.22);
    --tg-accent-soft:      rgba(36, 129, 204, 0.22);
    --tg-critical-soft:    rgba(196, 30, 26, 0.28);
    --tg-notice-soft:      rgba(245, 184, 0, 0.24);
    --tg-info:             #bf5af2;   /* dark-mode brighter purple */
    --tg-info-soft:        rgba(191, 90, 242, 0.28);
  }
}

/* v0.3.29.5 (BMF-N5) — explicit theme overrides set by the drawer
   footer theme switcher.  Takes precedence over both the
   prefers-color-scheme media query AND any TG-pushed theme vars
   (tma.js applyThemeParams uses inline style on :root, which
   class-scoped vars below override via specificity).
   ``theme-light`` and ``theme-dark`` are mutually exclusive;
   absence of both = auto (follow TG/system).
   We use ``html.theme-*`` (one extra level of specificity beyond
   ``:root``) so the explicit theme wins. */
html.theme-light {
  --tg-bg: #ffffff;
  --tg-text: #000000;
  --tg-hint: #707579;
  --tg-link: #2481cc;
  --tg-button: #2481cc;
  --tg-button-text: #ffffff;
  --tg-secondary-bg: #f4f4f5;
  --tg-section-bg: #ffffff;
  --tg-section-sep: #c8c7cc;
  --tg-accent: #2481cc;
  --tg-positive-soft:    rgba(52, 199, 89, 0.14);
  --tg-warning-soft:     rgba(255, 149, 0, 0.14);
  --tg-destructive-soft: rgba(255, 59, 48, 0.14);
  --tg-accent-soft:      rgba(36, 129, 204, 0.14);
  --tg-info:             #af52de;
  --tg-info-soft:        rgba(175, 82, 222, 0.16);
}
html.theme-dark {
  --tg-bg: #17212b;
  --tg-text: #f5f5f5;
  --tg-hint: #708499;
  --tg-link: #6ab3f3;
  --tg-button: #5288c1;
  --tg-button-text: #ffffff;
  --tg-secondary-bg: #0e1621;
  --tg-section-bg: #232e3c;
  --tg-section-sep: #2e3a48;
  --tg-accent: #6ab3f3;
  --tg-positive-soft:    rgba(52, 199, 89, 0.22);
  --tg-warning-soft:     rgba(255, 149, 0, 0.22);
  --tg-destructive-soft: rgba(255, 59, 48, 0.22);
  --tg-accent-soft:      rgba(106, 179, 243, 0.22);
  --tg-info:             #bf5af2;
  --tg-info-soft:        rgba(191, 90, 242, 0.28);
}