/* ════════════════════════════════════════════════════════════════════════
   FileMe — единый дизайн-язык (tokens.css)
   Подключается в app (index.html), ЛК (account.html), лендинг (landing.html).
   Канонические токены --fm-*; поверхности постепенно переводятся на них.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* — палитра: тёмная тёплая (по умолчанию) — */
  --fm-bg:        #0d0c14;
  --fm-bg-2:      #121019;
  --fm-surface-1: rgba(255,190,60,.028);
  --fm-surface-2: rgba(255,190,60,.055);
  --fm-card:      #16151f;
  --fm-inp:       #0f0e16;
  --fm-border:    rgba(255,255,255,.07);
  --fm-border-2:  rgba(255,255,255,.11);
  --fm-text:      #f4ede4;
  --fm-muted:     rgba(244,237,228,.46);

  /* — акценты (одинаковы в обеих темах) — */
  --fm-orange:      #f97316;
  --fm-orange-2:    #fb923c;
  --fm-orange-soft: rgba(249,115,22,.12);
  --fm-amber:       #fbbf24;
  --fm-indigo:      #818cf8;
  --fm-violet:      #a78bfa;
  --fm-ok:          #34d399;
  --fm-rose:        #f87171;
  --fm-on-accent:   #1a1208;   /* тёмный текст на оранжевом — контраст на обеих темах */

  /* — радиусы — */
  --fm-r-sm:   10px;
  --fm-r:      14px;
  --fm-r-lg:   20px;
  --fm-r-pill: 999px;

  /* — тени — */
  --fm-shadow-sm:   0 1px 2px rgba(0,0,0,.20);
  --fm-shadow:      0 8px 28px rgba(0,0,0,.30);
  --fm-shadow-glow: 0 8px 30px rgba(249,115,22,.30);

  /* — движение: премиальные кривые — */
  --fm-ease:       cubic-bezier(.22,.61,.36,1);   /* мягкий out */
  --fm-ease-inout: cubic-bezier(.65,0,.35,1);     /* для смены темы */
  --fm-ease-spring:cubic-bezier(.34,1.45,.5,1);   /* лёгкий overshoot */
  --fm-dur-1: .15s;
  --fm-dur-2: .25s;
  --fm-dur-3: .42s;
  --fm-dur-theme: .5s;    /* ЕДИНАЯ длительность смены темы — плавно, одинаково на app/ЛК/сайте.
                             ВАЖНО: класс theme-anim снимается через 700мс (>500) во всех 3 файлах,
                             иначе переход обрежется на полпути → рывок/разная скорость. */

  /* — «премиум-поверхность» (плотная, БЕЗ backdrop-filter — он лагает) — */
  --fm-glass-bg:     #17151f;                              /* плотная подложка панели */
  --fm-glass-border: rgba(255,255,255,.12);
  --fm-glass-hi:     inset 0 1px 0 rgba(255,255,255,.22);  /* блик по верхней кромке */
}

html.light{
  --fm-bg:        #faf5e4;
  --fm-bg-2:      #ffffff;
  --fm-surface-1: rgba(110,70,10,.04);
  --fm-surface-2: rgba(110,70,10,.08);
  --fm-card:      #ffffff;
  --fm-inp:       #f3eddd;
  --fm-border:    rgba(0,0,0,.09);
  --fm-border-2:  rgba(0,0,0,.13);
  --fm-text:      #3a2c1e;
  --fm-muted:     rgba(74,58,42,.64);

  --fm-shadow-sm:   0 1px 2px rgba(120,80,20,.10);
  --fm-shadow:      0 10px 30px rgba(120,80,20,.14);

  --fm-glass-bg:     #ffffff;
  --fm-glass-border: rgba(0,0,0,.10);
  --fm-glass-hi:     inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Жидкое стекло: утилиты ──────────────────────────────────────────────
   .fm-glass        — нейтральная стеклянная поверхность (nav, модалки, чипы)
   .fm-btn-glass    — акцентная оранжевая кнопка «как iOS» (главные действия)   */
.fm-glass{
  background: var(--fm-glass-bg);
  border: 1px solid var(--fm-glass-border);
  box-shadow: var(--fm-shadow), var(--fm-glass-hi);
}

.fm-btn-glass{
  position: relative;
  overflow: hidden;
  color: var(--fm-on-accent);
  background: linear-gradient(180deg, var(--fm-orange-2), var(--fm-orange));
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 6px 20px rgba(249,115,22,.34),
              inset 0 1px 0 rgba(255,255,255,.45),
              inset 0 -1px 0 rgba(0,0,0,.12);
  transition: transform var(--fm-dur-2) var(--fm-ease),
              box-shadow var(--fm-dur-2) var(--fm-ease),
              filter var(--fm-dur-1) var(--fm-ease);
}
/* верхний блик-«мокрое стекло» */
.fm-btn-glass::before{
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 46%);
  pointer-events:none;
}
.fm-btn-glass > *{ position:relative; z-index:1; }
.fm-btn-glass:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 10px 30px rgba(249,115,22,.46),
              inset 0 1px 0 rgba(255,255,255,.55),
              inset 0 -1px 0 rgba(0,0,0,.12);
}
.fm-btn-glass:active{
  transform: translateY(0) scale(.985);
  box-shadow: 0 4px 14px rgba(249,115,22,.30),
              inset 0 1px 0 rgba(255,255,255,.40);
}

/* ── Плавная смена темы ──────────────────────────────────────────────────
   Класс .theme-anim вешается на <html> ТОЛЬКО на время переключения
   (toggleTheme добавляет → снимает через ~480мс). Обычные ховеры не трогаем. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after{
  /* box-shadow НАМЕРЕННО исключён: его кроссфейд на КАЖДОМ узле (* + ::before/::after)
     перерисовывал тысячи теней → лаг при смене темы (особенно на лендинге, dark→light).
     Тени переключаются мгновенно — на фоне цветового кроссфейда это незаметно. */
  transition: background-color var(--fm-dur-theme) var(--fm-ease-inout),
              color            var(--fm-dur-theme) var(--fm-ease-inout),
              border-color     var(--fm-dur-theme) var(--fm-ease-inout),
              fill             var(--fm-dur-theme) var(--fm-ease-inout) !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce){
  html.theme-anim,
  html.theme-anim *,
  html.theme-anim *::before,
  html.theme-anim *::after{ transition: none !important; }
}

/* ── Сегментный knob обязан СКОЛЬЗИТЬ и во время смены темы ───────────────────
   Баг: theme-anim выше задаёт `transition: … !important` БЕЗ transform → у knob'а
   (app .seg-knob, ЛК .toggle .knob) пропадал собственный slide и он прыгал в новую
   позицию. Возвращаем transform/width-переход адресно (специфичность 0,2,1 > 0,1,1,
   среди !important выигрывает). Цвет knob'а заодно плавно тянем под смену темы. */
html.theme-anim .seg-knob,
html.theme-anim .toggle .knob{
  transition: transform .34s var(--fm-ease-spring),
              width     .34s var(--fm-ease-spring),
              background-color var(--fm-dur-theme) var(--fm-ease-inout) !important;
}

/* ── Смена темы через View Transitions ───────────────────────────────────────
   Где браузер поддерживает (iOS18+/Chrome111+) — кроссфейдим ВЕСЬ кадр как картинку,
   без поэлементного transition var-цветов (он давал рывок «бах» в конце). */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .5s;
  animation-timing-function: var(--fm-ease-inout);
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none; }
}

/* ── Плавная смена языка ──────────────────────────────────────────────────────
   На время переключения вешаем html.lang-switching → translatable-узлы кратко
   гаснут, текст меняется «на дне», возвращаются. Затрагиваем только [data-i18n]
   (НЕ knob/инпуты; scroll-reveal лендинга висит на родителях, а не на этих узлах). */
/* .lang-fade-x — для динамических узлов, чей текст зависит от состояния и ставится
   из JS (бейджи статуса, даты, заголовки подписки в ЛК) — у них нет data-i18n. */
[data-i18n], .lang-fade-x{ transition: opacity .26s var(--fm-ease); }
html.lang-switching [data-i18n], html.lang-switching .lang-fade-x{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  [data-i18n], .lang-fade-x{ transition: none; }
  html.lang-switching [data-i18n], html.lang-switching .lang-fade-x{ opacity: 1; }
}