/* ============================================================
   Damage — Telegram Mini App · Design Tokens
   ============================================================
   Источник значений — miniapp/design/tokens.json (менять только
   там; это ручная проекция). Эстетика — brand/AESTHETIC.md
   (§3 палитра, §4 свет, §6 типографика, §7 моушн) + brand/BRAND.md §6.

   Слои: primitive → semantic (day / [data-theme="night"]) → component.
   Проверка любого решения: «выглядит как свет в индустриальном мире?»
   (BRAND §8.5). Чистый чёрный запрещён; самое тёмное — sky-950 #101A33.
   ============================================================ */

:root {
  /* ==========================================================
     Primitive — цвета (сняты с референсов aesthetic/, не «по памяти»)
     ========================================================== */
  --sky-50:  #E9F0FC;
  --sky-100: #CDDCF7;
  --sky-200: #A8C4F0;   /* низ неба-градиента */
  --sky-300: #8FA9EF;
  --sky-400: #6E8CE9;   /* акцент на тёмном */
  --sky-500: #4E6FE0;   /* верх неба-градиента */
  --sky-600: #3D63E4;
  --sky-700: #2B4FD8;   /* sky-deep второй тон */
  --sky-800: #1E3FB8;   /* sky-deep — главный акцент бренда */
  --sky-900: #16255C;
  --sky-950: #101A33;   /* самое тёмное в интерфейсе */

  --cloud-25:  #FAFBFE;
  --cloud-50:  #F4F7FC; /* облако — базовый фон */
  --cloud-100: #EBF0F8;
  --cloud-200: #DFE7F2;

  --pure: #FFFFFF;

  --silver-100: #F1F4F9;
  --silver-200: #E8ECF2;
  --silver-300: #DDE2EA;
  --silver-400: #C9CFD9;
  --silver-500: #AEB6C4;
  --silver-600: #9AA3B2;

  /* дымка (референс SILENCE) — только декор/градиенты, не акцент */
  --haze-100: #EEEAF7;
  --haze-200: #DAD4EE;
  --haze-300: #C9C2E6;

  /* статусы — приглушённые (AESTHETIC §3.3) */
  --status-success: #4E9776;  /* спокойная хвоя: «небо твоё» */
  --status-warning: #C08A3E;  /* тёплое золото */
  --status-error:   #C25E5E;  /* приглушённый кирпич, не алый */

  --ink-secondary:    #3C4A6B;
  --ink-night-tertiary: #7C89A6;

  /* ==========================================================
     Primitive — свет (градиенты; свет — активный элемент, AESTHETIC §4)
     ========================================================== */
  /* день: небо с облачным светом — пятна-циррусы по углам и светлое
     «облачное море» у горизонта; сверху глубокое (белый текст читается) */
  --grad-sky-day:
    radial-gradient(95% 50% at 88% 4%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 65%),
    radial-gradient(60% 35% at 8% 14%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(140% 55% at 50% 112%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(175deg, #2B4FD8 0%, #4E6FE0 38%, #A8C4F0 78%, #E9F0FC 100%);
  --grad-sky-soft:  linear-gradient(180deg, #6E8CE9 0%, #A8C4F0 60%, #E9F0FC 100%);
  --grad-night-sky: linear-gradient(180deg, #16255C 0%, #101A33 70%);
  --grad-halo:  radial-gradient(closest-side, rgba(255,255,255,0.75), rgba(255,255,255,0) 72%);
  --grad-flare: radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(255,255,255,0) 68%);
  --grad-glint: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0) 62%);
  --grad-silver: linear-gradient(120deg, #E8ECF2 0%, #C9CFD9 38%, #9AA3B2 58%, #E8ECF2 88%);
  --grad-haze:   linear-gradient(180deg, #A8C4F0 0%, #DAD4EE 55%, #EEEAF7 100%);
  --grad-aurora: radial-gradient(60% 45% at 50% 0%, rgba(43,79,216,0.55), rgba(16,26,51,0) 70%);

  /* ==========================================================
     Primitive — типографика (клиентская система, отлична от админки:
     ДНК общая — serif-акценты, tabular-nums, тонкие линии)
     ========================================================== */
  --font-display: 'Inter Tight', 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --font-serif:   'Instrument Serif', 'Hedvig Letters Serif', Georgia, serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', 'Cascadia Mono', monospace;

  /* ==========================================================
     Primitive — воздух: отступы, радиусы, стекло, размытие
     ========================================================== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px;
  --screen-x: 20px;

  --radius-xs: 10px; --radius-sm: 14px; --radius-md: 18px;
  --radius-lg: 24px; --radius-xl: 28px; --radius-pill: 999px;

  --blur-thin: blur(10px) saturate(1.2);
  --blur-card: blur(18px) saturate(1.5);  /* откат 08.11 к исходной дневной теме */
  --blur-sky:  blur(28px) saturate(1.6);

  /* ==========================================================
     Primitive — моушн: всё медленно и по воздуху, без пружин
     ========================================================== */
  --dur-tap: 150ms; --dur-fast: 240ms; --dur-base: 380ms;
  --dur-slow: 560ms; --dur-ambient: 900ms;
  --dur-breath: 3600ms; --dur-float: 7000ms; --dur-glint: 2800ms;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-air: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-linear: linear;

  /* ==========================================================
     Telegram: safe areas и стабильный viewport
     ========================================================== */
  --tg-safe-top: env(safe-area-inset-top, 0px);
  --tg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-left: env(safe-area-inset-left, 0px);
  --tg-safe-right: env(safe-area-inset-right, 0px);
  --app-vh: 1vh; /* пересчитывается из viewportStableHeight: --app-vh: <px> */

  /* ==========================================================
     Semantic — ДЕНЬ (небо), тема по умолчанию
     ========================================================== */
  --bg-base: var(--cloud-50);
  --bg-sky: var(--grad-sky-day);
  --bg-sky-soft: var(--grad-sky-soft);

  --surface-card: rgba(255, 255, 255, 0.72);   /* откат 08.11 к исходной дневной теме */
  --surface-card-solid: var(--pure);
  --surface-veil: rgba(244, 247, 252, 0.60);
  --surface-glass-on-sky: rgba(255, 255, 255, 0.22);

  --text-primary: var(--sky-950);
  --text-secondary: var(--ink-secondary);
  --text-tertiary: var(--silver-600);
  --text-on-sky: var(--pure);              /* только на верхней трети неба */
  --text-on-sky-dim: rgba(255, 255, 255, 0.75);
  --text-on-action: var(--sky-950);

  --accent: var(--sky-800);
  --accent-hover: var(--sky-700);

  --action-deep-bg: var(--sky-800);
  --action-deep-bg-hover: var(--sky-700);
  --action-light-bg: var(--pure);

  --hairline: rgba(16, 26, 51, 0.08);
  --hairline-strong: rgba(16, 26, 51, 0.14);
  --hairline-on-sky: rgba(255, 255, 255, 0.30);
  --focus-ring: rgba(78, 111, 224, 0.45);
  --scrim: rgba(16, 26, 51, 0.32);

  /* статусы */
  --success: var(--status-success);
  --warning: var(--status-warning);
  --error: var(--status-error);
  --success-soft: rgba(78, 151, 118, 0.12);
  --warning-soft: rgba(192, 138, 62, 0.12);
  --error-soft: rgba(194, 94, 94, 0.12);

  /* ==========================================================
     Component
     ========================================================== */
  /* светящаяся кнопка главного экрана — единственный яркий элемент */
  --btn-glow-bg: var(--action-light-bg);
  --btn-glow-text: var(--sky-950);
  --btn-glow-shadow: 0 0 28px rgba(255,255,255,0.55), 0 12px 32px rgba(30,63,184,0.28);
  --btn-glow-shadow-hover: 0 0 44px rgba(255,255,255,0.70), 0 14px 40px rgba(30,63,184,0.34);
  --btn-glow-height: 56px;

  /* кнопка-глубина на облачных поверхностях */
  --btn-deep-bg: var(--action-deep-bg);
  --btn-deep-text: var(--pure);
  --btn-deep-shadow: 0 10px 28px rgba(30,63,184,0.32);
  --btn-deep-height: 52px;

  /* карточка-стекло */
  --card-bg: var(--surface-card);
  --card-radius: var(--radius-md);
  --card-hairline: var(--hairline);
  --card-shadow: 0 10px 36px rgba(30,63,184,0.14);
  --card-inner-light: inset 0 1px 0 rgba(255,255,255,0.60);
  --card-float-shadow: 0 18px 56px rgba(16,26,51,0.18);

  /* статус-пилюля: пульс — дыхание (3–4 с), не сигнализация */
  --status-dot-connected: var(--pure);
  --status-dot-connecting: rgba(255,255,255,0.70);
  --status-dot-down: var(--silver-400);

  /* таббар: иконки темные на светлой теме — не сливаются со стеклом */
  --tabbar-bg: var(--surface-glass-on-sky);
  --tabbar-blur: var(--blur-sky);
  --tabbar-fg: var(--ink-secondary);
  --tabbar-fg-active: var(--sky-800);
  --tabbar-active-glow: 0 0 18px var(--tabbar-fg-active);

  /* выбранный тариф */
  --tariff-selected-bg: var(--sky-800);
  --tariff-selected-ring: 0 0 0 3px rgba(255,255,255,0.35), 0 14px 40px rgba(30,63,184,0.40);

  /* перья-частицы — только за флагом perf (BRAND §6) */
  --feather-opacity: 0.35;
}

/* ============================================================
   Semantic — НОЧЬ: глубокий сине-серый со звёздным светом (BRAND §6).
   Включается Telegram colorScheme='dark' или data-theme="night".
   ============================================================ */
[data-theme="night"] {
  --bg-base: var(--sky-950);
  --bg-sky: var(--grad-night-sky);
  --bg-sky-soft: var(--grad-night-sky);

  --surface-card: rgba(255, 255, 255, 0.06);
  --surface-card-solid: #182347;
  --surface-veil: rgba(16, 26, 51, 0.55);
  --surface-glass-on-sky: rgba(255, 255, 255, 0.08);

  --text-primary: var(--sky-50);
  --text-secondary: var(--sky-200);
  --text-tertiary: var(--ink-night-tertiary);
  --text-on-sky: var(--sky-50);
  --text-on-sky-dim: rgba(233, 240, 252, 0.68);
  --text-on-action: var(--sky-950);

  --accent: var(--sky-400);
  --accent-hover: var(--sky-300);

  --action-deep-bg: var(--sky-700);
  --action-deep-bg-hover: var(--sky-600);
  --action-light-bg: var(--pure);  /* ночью светится сильнее */

  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --hairline-on-sky: rgba(255, 255, 255, 0.24);
  --focus-ring: rgba(110, 140, 233, 0.55);
  --scrim: rgba(6, 10, 22, 0.55);

  --card-bg: var(--surface-card);
  --card-hairline: var(--hairline);
  --card-shadow: 0 12px 40px rgba(6, 10, 22, 0.45);
  --card-inner-light: inset 0 1px 0 rgba(255,255,255,0.14);

  --btn-deep-bg: var(--action-deep-bg);
  --tabbar-bg: var(--surface-glass-on-sky);
  --tabbar-fg: var(--sky-50);
  --tabbar-fg-active: var(--pure);
}

/* ============================================================
   Keyframes — воздух и свет (AESTHETIC §7)
   ============================================================ */
@keyframes breath {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.06); }
}
@keyframes halo-breath {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes glint-sweep {
  0%   { background-position: -220% 0; }
  100% { background-position: 220% 0; }
}
@keyframes flare-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  35%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes drift {
  0%   { transform: translate3d(0, -12%, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: var(--feather-opacity); }
  88%  { opacity: var(--feather-opacity); }
  100% { transform: translate3d(24px, 110vh, 0) rotate(18deg); opacity: 0; }
}
@keyframes rise-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   A11y — reduced motion: ambient гасим, отклик оставляем
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}