/* Дизайн-токены Slice — единственное место, где задаётся внешний вид.
   Направление: «Стекло-плюс» (design/hybrid/1_steklo_plus.*, README там же).
   Родной Telegram и iOS 26: системные серые подложки, плоские белые группы, пилюли,
   стекло только у плавающих вкладок и нижней панели действий, монохромная главная кнопка.
   От «Студии»: тонкие линии вместо теней, моноширинные цифры, полоса склеек.
   Один постоянный фирменный цвет: пастельный лайм #CFF35B (интерфейс НЕ перекрашивается
   под цвет субтитров). В светлой теме лайм только заливкой под тёмным текстом,
   а текст, линии и прогресс фирменным цветом — тёмный оливковый --c-brand-ink.

   Контракт (имена и смысл) описан в design/miniapp_ux_spec.md, раздел 7.
   Добавлены: --c-brand, --c-on-brand, --c-brand-ink, --c-on-ok, --c-glass*, --c-tab-on,
   --c-fade, --fs-title, --fw-heavy, --glass-blur.

   Правила:
   - компоненты (app.css) берут цвет, радиусы, отступы, шрифты только отсюда;
   - --c-bg, --c-accent, --c-on-accent, --c-surface — только #rrggbb: их получает Telegram
     для шапки, фона, нижней панели и нативных кнопок;
   - тема переключается атрибутом data-theme="dark|light" на <html>
     (ставит app.js по colorScheme Telegram или по системе). */

/* Шрифты — с нашего сервера (webapp/fonts, отдаются по /fonts/…), не с Google Fonts: IP пользователя
   не уходит за границу. Onest и Geist Mono — SIL OFL 1.1, тексты лицензий лежат рядом (OFL-*.txt). */
@font-face { font-family: "Onest"; src: url("../fonts/Onest.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* шрифты: Onest (интерфейс) и Geist Mono (цифры), оба с полной кириллицей, OFL */
  --font-ui: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-num: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-s: 13px; --fs-m: 15px; --fs-l: 17px; --fs-xl: 22px;
  --fs-title: 30px;                    /* заголовок экрана */
  --lh: 1.35;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; --fw-heavy: 700;
  --label-case: uppercase;             /* подписи секций — капитель, как в iOS */
  --label-tracking: .04em;

  /* геометрия */
  --radius-s: 12px;                    /* миниатюры, метки, мини-превью */
  --radius-m: 18px;                    /* группы, карточки, уведомления */
  --radius-l: 24px;                    /* превью-«телефон», плеер, шторка */
  --radius-pill: 999px;                /* кнопки, чипы, сегменты, вкладки */
  --border-w: 1px;                     /* тонкие линии вместо теней */

  /* отступы: всё кратно 4 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --gutter: 16px;
  --tap: 44px;
  --content-max: 560px;

  /* движение интерфейса (не путать с анимацией субтитров — она из движка) */
  --dur-fast: 150ms; --dur: 250ms; --ease: cubic-bezier(.2, .8, .2, 1);
  --glass-blur: blur(24px) saturate(1.8);
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #000000;                     /* фон экрана (уходит в шапку Telegram) */
  --c-surface: #1c1c1e;                /* группы, карточки, невыбранные чипы */
  --c-surface-2: #2c2c2e;              /* дорожка сегментов и прогресса, вторичные кнопки */
  --c-thumb: #48484a;                  /* выбранный вариант в сегментах */
  --c-line: #2e2e31;                   /* тонкие линии: разделители и обводки */
  --c-text: #f5f5f7;
  --c-text-2: #98989f;                 /* вторичный: 5,9:1 на #1c1c1e, 4,8:1 на #2c2c2e */
  --c-text-3: #8e8e93;                 /* подсказки: 5,2:1 на #1c1c1e, 6,4:1 на фоне */
  --c-accent: #f5f5f7;                 /* главная кнопка: монохромная, в тёмной теме белая */
  --c-on-accent: #0b0b0f;
  --c-accent-soft: rgba(255, 255, 255, .08);
  --c-brand: #cff35b;                  /* лайм: заливка текущего этапа, счётчик */
  --c-on-brand: #0b0b0f;               /* 15,5:1 */
  --c-brand-ink: #cff35b;              /* прогресс, «идёт», кольцо выбора, фокус */
  --c-ok: #30d158; --c-on-ok: #0b0b0f;
  --c-warn: #ffb340;
  --c-err: #ff6961; --c-err-soft: rgba(255, 105, 97, .14);
  --c-scrim: rgba(0, 0, 0, .6);
  --c-media: #000000;
  --c-glass: rgba(44, 44, 48, .58);    /* стекло вкладок */
  --c-glass-edge: rgba(255, 255, 255, .14);
  --c-tab-on: rgba(255, 255, 255, .12);
  --c-fade: rgba(0, 0, 0, .78);        /* затухание контента под нижней панелью */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .5);
}

[data-theme="light"] {
  color-scheme: light;
  --c-bg: #f2f2f7;
  --c-surface: #ffffff;
  --c-surface-2: #e9e9ee;
  --c-thumb: #ffffff;
  --c-line: #dedee4;
  --c-text: #0b0b0f;
  --c-text-2: #636369;                 /* 5,9:1 на белом, 5,3:1 на фоне, 4,9:1 на #e9e9ee */
  --c-text-3: #6c6c73;                 /* 5,2:1 на белом, 4,7:1 на фоне */
  --c-accent: #0b0b0f;                 /* главная кнопка: почти чёрная */
  --c-on-accent: #ffffff;
  --c-accent-soft: rgba(11, 11, 15, .06);
  --c-brand: #cff35b;                  /* только заливкой под тёмным текстом */
  --c-on-brand: #0b0b0f;
  --c-brand-ink: #4e6600;              /* текст и линии фирменным цветом: 6,5:1 на белом */
  --c-ok: #248a3d; --c-on-ok: #ffffff;
  --c-warn: #a05a00;
  --c-err: #c8001a; --c-err-soft: rgba(215, 0, 21, .07);
  --c-scrim: rgba(0, 0, 0, .35);
  --c-media: #000000;
  --c-glass: rgba(255, 255, 255, .62);
  --c-glass-edge: rgba(255, 255, 255, .9);
  --c-tab-on: rgba(11, 11, 15, .07);
  --c-fade: rgba(242, 242, 247, .82);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .12);
}