/* Design tokens — «Диспетчер» v2. See runs/product_v2/DESIGN_SYSTEM.md */
:root {
  /* Telegram themeParams, light fallback (§1) */
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1b1b1b);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --link: var(--tg-theme-link-color, #2a7fff);
  --button: var(--tg-theme-button-color, #2a7fff);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f2f2f5);
  --header-bg: var(--tg-theme-header-bg-color, var(--bg));
  --accent-text: var(--tg-theme-accent-text-color, var(--link));
  --section-bg: var(--tg-theme-section-bg-color, var(--secondary-bg));
  --section-header-text: var(--tg-theme-section-header-text-color, var(--hint));
  --section-separator: var(--tg-theme-section-separator-color, rgba(0, 0, 0, 0.08));
  --subtitle-text: var(--tg-theme-subtitle-text-color, var(--hint));
  --destructive-text: var(--tg-theme-destructive-text-color, #e0393e);
  --bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color, var(--secondary-bg));

  /* Brand accent — «сигнальный янтарь» (§1.1), reserved for money + primary CTA */
  --brand-accent: #b5701f;

  /* CRITIQUE_c4.md #12: HeroMoneyCard's "Peak-End Rule" glow opacity — was a
     flat 10% in both themes and read as imperceptible at normal size. */
  --hero-glow: 16%;

  /* CRITIQUE_c3.md P1 #6: the progress ring's empty track used to be
     --section-bg (same as its own card background) so at 0 points the ring
     was effectively invisible. --hint already has correct light/dark
     fallback values, so no separate dark-mode override is needed here. */
  --ring-track: color-mix(in srgb, var(--hint) 35%, transparent);

  /* Status palette (§1.2) — always icon + text, never color alone */
  --st-ok: #178f5c;
  --st-broken: #b87f00;
  --st-repair: #2a7fff;
  --st-unpublished: var(--hint);

  /* Alert colors, fixed for readability in both themes (§1.3) */
  --alert-bg: #fdeded;
  --alert-text: #a32020;
  --warn-bg: #fff3cd;
  --warn-text: #6b5300;

  /* Spatial scale (§3) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  /* Motion (§4) */
  --m-tap: 120ms;
  --m-swap: 180ms;
  --m-push: 240ms;
  --m-count: 320ms;
  --m-chart: 600ms;
  --m-cheer: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dev-browser fallback outside Telegram: prefers-color-scheme dark.
   Not pure black/white — halation guard (§1, research c4). Applies only to
   the base bg/text fallback values above; Telegram itself always supplies
   themeParams directly. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #121212);
    --text: var(--tg-theme-text-color, #f2f0eb);
    --hint: var(--tg-theme-hint-color, #9a9a9a);
    --link: var(--tg-theme-link-color, #5fa3ff);
    --button: var(--tg-theme-button-color, #5fa3ff);
    --button-text: var(--tg-theme-button-text-color, #0e0e0e);
    --secondary-bg: var(--tg-theme-secondary-bg-color, #1c1c1e);
    --section-separator: var(--tg-theme-section-separator-color, rgba(255, 255, 255, 0.1));

    --brand-accent: #b97a34;
    --hero-glow: 22%;
    --st-ok: #18965f;
    --st-broken: #b98300;
    --st-repair: #3e7fe0;

    --alert-bg: #3a2020;
    --alert-text: #f2a6a6;
    --warn-bg: #3a3016;
    --warn-text: #e8c86b;
  }
}

/* prefers-reduced-motion: global guard, not a per-component option (§4) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-swap: 0ms;
    --m-push: 0ms;
    --m-count: 0ms;
    --m-chart: 0ms;
    --m-cheer: 0ms;
  }
}