/* ============================================================================
   Warp Design Tokens — единый источник правды.
   Значения выверены по реальному фронту (все *.module.css в frontend/src).
   Полная спека: tests/visual/stand/design-system.md
   Правило: компоненты используют ТОЛЬКО var(--token). Никаких raw hex/px.
   Нет токена — не выдумывай: добавь сюда, потом используй.
   ============================================================================ */
:root {
  /* ── Color · brand ───────────────────────────────────────────────────── */
  --color-accent:            #FF7E06;
  --color-accent-press:      #C14A0A;

  /* ── Color · semantic (деньги/статусы) ───────────────────────────────── */
  --color-success:           #4ADE80;
  --color-error:             #F73F23;
  --color-neutral-lose:      #525252;
  --color-pink:              #F5009B;
  --color-blue:              #4789FF;
  --color-gold:              #FFD700;

  /* ── Color · surface ─────────────────────────────────────────────────── */
  --color-bg:                #030303;
  --color-surface:           rgba(20, 20, 20, 0.80);
  --color-surface-card:      rgba(40, 40, 40, 0.70);
  --color-surface-elevated:  rgba(54, 54, 58, 0.75);
  --color-inset:             #252525;

  /* ── Color · text ────────────────────────────────────────────────────── */
  --color-text:              #FFFFFF;
  --color-text-title:        #F8F6F4;
  --color-text-secondary:    #989898;
  --color-text-muted:        #636363;
  --color-on-accent:         #FFFFFF;

  /* ── Color · border ──────────────────────────────────────────────────── */
  --color-border:            #333333;
  --color-border-subtle:     rgba(255, 255, 255, 0.08);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans:               -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif;
  --font-rounded:            'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif;

  --fw-regular:              400;
  --fw-medium:               510;
  --fw-semibold:             590;
  --fw-bold:                 700;

  /* размеры — descriptive: реально используемые значения (px = имя) */
  --fs-caption:              12px;
  --fs-13:                   13px;
  --fs-body:                 14px;
  --fs-15:                   15px;  /* самый частый размер тела */
  --fs-base:                 16px;
  --fs-17:                   17px;  /* самый частый заголовок карты */
  --fs-title:                20px;
  --fs-22:                   22px;
  --fs-heading:              28px;
  --fs-balance:              40px;
  --fs-amount:               50px;

  /* ── Spacing — descriptive (реальные значения, px = имя) ─────────────── */
  --space-2:                 2px;
  --space-4:                 4px;
  --space-6:                 6px;
  --space-8:                 8px;
  --space-10:                10px;  /* самый частый отступ */
  --space-12:                12px;
  --space-14:                14px;
  --space-16:                16px;
  --space-20:                20px;
  --space-24:                24px;
  --space-32:                32px;
  --space-48:                48px;
  --space-64:                64px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius-sm:               4px;
  --radius-card:             25px;   /* карты, кнопки, инпуты */
  --radius-nav:              30px;   /* плавающий tab bar */
  --radius-round:            100px;  /* полные пилюли: balance/stat/odds */
  --radius-glass:            26px;
  --radius-sheet:            60px;   /* bottom-sheet */
  --radius-circle:           999px;  /* аватары, круглые иконо-кнопки */

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --shadow-card:             0 4px 14px rgba(0, 0, 0, 0.40);
  --shadow-sheet:            0 -4px 24px rgba(0, 0, 0, 0.45);
  --glow-success:            0 0 18px rgba(74, 222, 128, 0.50);  /* выигрыш (coin flip) */
  --glow-orange:             0 0 24px rgba(255, 126, 6, 0.45);   /* РЕЗЕРВ: пока не в проде */
  --glass-blur:              saturate(3) blur(8px);              /* мелкие glass-чипы */
  --glass-blur-strong:       saturate(180%) blur(20px);          /* tab bar / segmented */

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:                cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out:             cubic-bezier(0.12, 0, 0.22, 1);
  --ease-spring:             cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:                120ms;
  --dur-base:                150ms;
  --dur-slow:                300ms;

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --z-base:                  0;
  --z-card:                  1;
  --z-sticky:                10;   /* липкие заголовки экранов */
  --z-nav:                   20;   /* tab bar */
  --z-overlay:               9000; /* бэкдроп модалок */
  --z-modal:                 9001; /* контент модалки/шит */
  --z-toast:                 10000;

  /* ── Safe areas (Telegram Mini App) ──────────────────────────────────────
     One canonical formula per axis. env() is 0 on Android WebView, so the real
     insets come from Telegram's vars: --tg-safe-area-inset-* (device status bar
     / gesture area) and --tg-content-safe-area-inset-* (content chrome). Both
     default to 0px, so on desktop/Chromium the tokens resolve to 0. */
  --safe-top: calc(
    max(env(safe-area-inset-top), var(--tg-safe-area-inset-top, 0px))
    + var(--tg-content-safe-area-inset-top, 0px)
  );
  --safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}