/*
 * Дизайн-система «Сад» — токены --lb-* (спека §6).
 *
 * Каркас наследует тему Telegram (фон, нижняя панель); контент брендовый.
 * Палитра переключается целиком атрибутом [data-tg-theme] на <html>,
 * который ставит tg.ts (syncThemeAttribute) — тёмная тема отдельная, не
 * инверсия (§6.1, принцип 10 §3.3). Светлая палитра — значение по умолчанию,
 * действует и до того, как tg.ts успел выставить атрибут (dev без Telegram).
 */

:root {
  /* Эксперимент Slush (miniapp/DESIGN.md): в светлой теме холст — всегда
   * Sky Wash, фон Telegram не наследуется (белые карточки на белом фоне
   * держала бы одна обводка). Нижняя панель — по-прежнему тема Telegram. */
  --lb-bg: #dceeff;
  --lb-bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color, var(--lb-bg));

  /* Палитра — светлая. Slush: чёрный текст и обводки, белые карточки,
   * главное действие — чёрная пилюля. */
  --lb-surface: #ffffff;
  --lb-surface-2: #e9e9e9;
  --lb-text: #000000;
  --lb-text-2: #4a4a4a;
  /* Разделитель строк внутри карточки — тонкий серый; чёрный 1px здесь
   * шумит. Обводка контуров — отдельный --lb-outline. */
  --lb-line: #d9d9d9;
  --lb-accent-base: #000000;
  --lb-accent: var(--lb-accent-base);
  --lb-on-accent: #ffffff;
  --lb-accent-soft: #e9ccff;
  --lb-warm: #000000;
  --lb-warm-soft: #ffd731;
  --lb-warm-card: #ffd731;
  --lb-danger: #c83a02;
  --lb-ink: #000000;
  --lb-ink-text: #ffffff;

  /* Slush: без теней, объём — обводкой 1px и цветом. */
  --lb-shadow-card: none;
  --lb-shadow-tabbar: none;
  --lb-card-border: 1px solid var(--lb-outline);

  /* Новые роли Slush. Наклейки — декор; статусы — пилюля с обводкой,
   * иконкой и словом, текст на заливке чёрный. */
  --lb-outline: #000000;
  /* Текст на заливке наклейки/статуса — чёрный в обеих темах (DESIGN.md). */
  --lb-on-sticker: #000000;
  --lb-sticker-blue: #4da2ff;
  --lb-sticker-mint: #55db9c;
  --lb-sticker-lavender: #e9ccff;
  --lb-sticker-ember: #fb4903;
  --lb-sticker-sun: #ffd731;
  --lb-sticker-violet: #5c4ade;
  --lb-status-done: var(--lb-sticker-mint);
  --lb-status-wait: var(--lb-sticker-sun);
  --lb-status-error: var(--lb-sticker-ember);
  --lb-status-info: #dceeff;

  /* Форма. Slush: карточки 20, шторки 30, пилюли. */
  --lb-radius-card: 20px;
  --lb-radius-tile: 16px;
  --lb-radius-sheet: 30px;
  --lb-radius-pill: 999px;
  --lb-button-height: 56px;
  --lb-button-height-secondary: 48px;
  --lb-tabbar-height: 64px;
  --lb-hit-target: 44px;
  --lb-row-min-height: 56px;

  /* Типографика (§6.3). */
  --lb-font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lb-font-display: 'Oswald', 'Onest', 'Arial Narrow', sans-serif;

  /* Движение. Язык «Наклейка» — src/motion.ts (кривые EASE, длительности
   * DURATION); эти токены — для CSS-откликов (нажатие, смена цвета). */
  --lb-motion-fast: 150ms;
  --lb-motion-add: 180ms;
  --lb-motion-confirm: 220ms;
  --lb-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Тёмная тема — палитра A «ночное небо» (спека редизайна §3.1, DESIGN.md,
 * «Веб»): холст #0b1220, поверхности #111a2b, текст #f3f4f6, вторичный
 * #a8adb7, обводка светлая #e6e8ec; главное действие — белое с чёрным
 * текстом. Наклейки и статусы — те же цвета, текст на них чёрный
 * (`--lb-on-sticker`). «Мягкие» заливки (`--lb-accent-soft`,
 * `--lb-warm-soft`) — тёмные оттенки, на них светлый `--lb-text`. Холст не
 * наследует фон Telegram: шапку красим в цвет холста (tg.syncHeaderColor).
 *
 * Включается по системному prefers-color-scheme, если Telegram ещё не
 * проставил атрибут (dev/предпросмотр), и по [data-tg-theme="dark"],
 * который побеждает в обе стороны. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tg-theme='light']) {
    --lb-bg: #0b1220;
    --lb-bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color, #0b1220);
    --lb-surface: #111a2b;
    --lb-surface-2: #1b2639;
    --lb-text: #f3f4f6;
    --lb-text-2: #a8adb7;
    --lb-line: #2a3650;
    --lb-outline: #e6e8ec;
    --lb-accent-base: #ffffff;
    --lb-on-accent: #000000;
    --lb-accent-soft: #2a2142;
    --lb-warm: #ffd731;
    --lb-warm-soft: #3a3115;
    --lb-warm-card: #3a3115;
    --lb-danger: #ff8a5c;
    --lb-ink: #f3f4f6;
    --lb-ink-text: #000000;
    --lb-shadow-card: none;
    --lb-shadow-tabbar: none;
    --lb-card-border: 1px solid var(--lb-outline);
  }
}

:root[data-tg-theme='dark'] {
  --lb-bg: #0b1220;
  --lb-bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color, #0b1220);
  --lb-surface: #111a2b;
  --lb-surface-2: #1b2639;
  --lb-text: #f3f4f6;
  --lb-text-2: #a8adb7;
  --lb-line: #2a3650;
  --lb-outline: #e6e8ec;
  --lb-accent-base: #ffffff;
  --lb-on-accent: #000000;
  --lb-accent-soft: #2a2142;
  --lb-warm: #ffd731;
  --lb-warm-soft: #3a3115;
  --lb-warm-card: #3a3115;
  --lb-danger: #ff8a5c;
  --lb-ink: #f3f4f6;
  --lb-ink-text: #000000;
  --lb-shadow-card: none;
  --lb-shadow-tabbar: none;
  --lb-card-border: 1px solid var(--lb-outline);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--lb-bg);
  color-scheme: light dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--lb-bg);
  color: var(--lb-text);
  font-family: var(--lb-font-family);
  font-display: swap;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  /* Свой контекст наложения: слой эффектов `under` (src/motion.ts, z-index 0)
   * лежит под приложением, `top` (z-index 1000) — над ним. */
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding-bottom: calc(var(--lb-tabbar-height) + 40px + env(safe-area-inset-bottom, 0px));
}

button,
input,
textarea {
  font-family: inherit;
  color: inherit;
}

/* Табличные цифры во всех суммах (§6.3). */
.lb-money,
.lb-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Шкала типографики — эксперимент Slush (DESIGN.md, «Шкала Mini App»).
 * Display (Oswald, заглавные) — один на экран: заголовок экрана или герой. */
.lb-type-hero {
  font-family: var(--lb-font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0;
}
.lb-type-screen-title {
  font-family: var(--lb-font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.lb-type-card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lb-type-tile-money {
  font-size: 20px;
  font-weight: 700;
}
:where(h2).lb-type-section-title {
  margin: 0;
}
.lb-type-section-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lb-type-row {
  font-size: 16px;
  font-weight: 700;
}
.lb-type-body {
  font-size: 15px;
  font-weight: 500;
}
.lb-type-secondary {
  font-size: 13px;
  font-weight: 500;
}
.lb-type-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.032em;
}

@media (max-width: 359px) {
  .lb-type-screen-title {
    font-size: 38px;
  }
}

/* Заголовок полноэкранного маршрута стоит рядом с кнопкой «←»: на 320 px
 * одно длинное слово («Голосование», «Статистика») в 38 px рвалось посреди
 * слова (S7). */
@media (max-width: 359px) {
  .lb-route-title {
    font-size: 32px;
  }
}

/* Доступность (§6.6): видимый фокус, цель не единственный признак остаётся
 * ответственностью компонента (иконка/текст рядом с цветом). */
:focus-visible {
  outline: 2px solid var(--lb-outline);
  outline-offset: 2px;
}

::selection {
  background: var(--lb-sticker-sun);
  color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Мятная вспышка строки (motion.ts `flash`): пока фон мятный, текст строки
 * чёрный — серый вторичный текст тёмной темы на мятном нечитаем (S7a, З38).
 * Переопределяются те же токены, пилюли и аватары остаются своими. Атрибут
 * снимается по концу вспышки. */
[data-lb-flash] {
  --lb-text: var(--lb-on-sticker);
  --lb-text-2: var(--lb-on-sticker);
}