/* Дизайн-токены. Тема фиксированно тёмная — как на референсе. */
:root {
  color-scheme: dark;

  /* Поверхности */
  --bg: #0a0e15;
  --bg-elev: #0d121b;
  --card: #121722;
  --card-2: #171e2c;
  --card-3: #1d2635;
  --stroke: rgba(255, 255, 255, 0.07);
  --stroke-strong: rgba(255, 255, 255, 0.13);

  /* Текст */
  --text: #edf2fa;
  --text-2: #939db2;
  --text-3: #5c6678;

  /* Акценты */
  --blue: #2f6bff;
  --blue-600: #1d55e0;
  --blue-soft: rgba(47, 107, 255, 0.14);
  --blue-glow: rgba(47, 107, 255, 0.42);

  --green: #22c55e;
  --green-2: #10b981;
  --green-soft: rgba(34, 197, 94, 0.14);
  --green-glow: rgba(34, 197, 94, 0.3);

  --amber: #f5a623;
  --amber-soft: rgba(245, 166, 35, 0.14);
  --amber-glow: rgba(245, 166, 35, 0.26);

  --red: #ef4a4a;
  --red-soft: rgba(239, 74, 74, 0.14);
  --red-glow: rgba(239, 74, 74, 0.24);

  --violet: #8b5cf6;

  /* Градиенты состояний hero */
  --hero-active: linear-gradient(150deg, #0f2f22 0%, #0c2119 45%, #0a1712 100%);
  --hero-expiring: linear-gradient(150deg, #33260c 0%, #241a08 45%, #171105 100%);
  --hero-expired: linear-gradient(150deg, #2a1519 0%, #1d1015 45%, #140c10 100%);
  --hero-none: linear-gradient(150deg, #16203a 0%, #101728 45%, #0c111c 100%);

  /* Геометрия */
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 15px;
  --r-sm: 11px;
  --r-pill: 999px;

  --pad: 16px;
  --gap: 12px;

  /* Движение */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 150ms;
  --t-mid: 220ms;
  --t-slow: 320ms;

  /* Тени */
  --sh-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.4);
  --sh-cta: 0 6px 18px var(--blue-glow), 0 1px 0 rgba(255, 255, 255, 0.18) inset;

  /* Раскладка */
  --nav-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

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