/* ==========================================================================
   Design tokens — Mini App Materials
   Цвета сняты пипеткой со скриншотов эталонного мини-аппа; типографика и
   радиусы оценены по 2x-скриншотам (правьте здесь — всё остальное подтянется).
   Три слоя: палитра (--ds-*) → семантика (--bg, --text…) → компоненты.
   ========================================================================== */

:root {
  /* ---- Палитра (не меняется между темами) ---- */
  --ds-blue:   #3A95FC;   /* основной акцент: кнопки, иконки, прогресс */
  --ds-cyan:   #20BDFC;   /* второй в паре с синим (сегментные бары) */
  --ds-link:   #0B59A1;   /* акцентные ссылки в тексте */
  --ds-green:  #22D394;   /* галочки, «готово» */
  --ds-teal:   #23D4BE;
  --ds-pink:   #F967B5;
  --ds-purple: #C17EFC;
  --ds-yellow: #FECB2F;   /* плашка «Без подписки» */
  --ds-ink:    #1D1D1F;   /* основной текст на светлом, карточки-герои */
  --ds-white:  #FFFFFF;
  --ds-black:  #000000;

  /* ---- Семантика: светлая тема ---- */
  --bg:          #FFFFFF;
  --surface:     #F4F4F4;                 /* карточки, «Читать», инпуты */
  --surface-2:   #E9E9EB;                 /* обложки, нажатое состояние */
  --text:        #1D1D1F;
  --text-2:      #6E6E73;                 /* описания, метки */
  --text-3:      #A7A6AA;                 /* плейсхолдеры, неактивное */
  --line:        #E7E7E9;
  --brand:       var(--ds-blue);          /* роль бренда: подменяется слоем бренда (brands/*) */
  --brand-2:     var(--ds-cyan);
  --on-brand:    #FFFFFF;                 /* текст и иконки на --brand */
  --accent:      var(--brand);
  --accent-2:    var(--brand-2);
  --link:        var(--ds-link);
  --ok:          var(--ds-green);
  --cta-bg:      #000000;                 /* главная кнопка внизу экрана */
  --cta-text:    #FFFFFF;
  --bar-bg:      #FFFFFF;                 /* плавающий таб-бар */
  --bubble:      #F0FDE2;                 /* «сообщение Telegram» внутри карточек */
  --hero-from:   #262627;
  --hero-to:     #1D1D1F;
  --shadow-float: 0 8px 28px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08);

  /* ---- Типографика ---- */
  --font: "Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: 40px;   /* заголовок оплаты, строчными */
  --fs-h1: 28px;        /* название статьи / программы */
  --fs-h2: 24px;        /* заголовки секций */
  --fs-h3: 20px;        /* заголовок в ленте, урок */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-overline: 11px;

  /* ---- Форма и ритм ---- */
  --r-xs: 10px;  --r-s: 16px;  --r-m: 20px;  --r-l: 24px;  --r-xl: 28px;  --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  --gutter: 16px;
  --col: 520px;
}

/* ---- Тёмная тема: Telegram dark, а также локальный «тёмный остров» (.on-dark),
        например экран оплаты и список уроков остаются чёрными в любой теме ---- */
:root[data-theme="dark"],
.on-dark {
  --bg:        #000000;
  --surface:   #333333;
  --surface-2: #3D3D3F;
  --text:      #FFFFFF;
  --text-2:    #A9A9A9;
  --text-3:    #6E6E73;
  --line:      #2A2A2C;
  --accent:    var(--brand);
  --link:      #5AAEFF;
  --ok:        #8EE0A2;                    /* пастельно-зелёный кружок «пройдено» */
  --cta-bg:    #FFFFFF;
  --cta-text:  #000000;
  --bar-bg:    #1C1C1E;
  --bubble:    #24321A;
  --shadow-float: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}

/* Без JS: следуем системной теме */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #333333; --surface-2: #3D3D3F; --text: #FFFFFF;
    --text-2: #A9A9A9; --text-3: #6E6E73; --line: #2A2A2C; --link: #5AAEFF;
    --ok: #8EE0A2; --cta-bg: #FFFFFF; --cta-text: #000000; --bar-bg: #1C1C1E;
    --bubble: #24321A;
    --shadow-float: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  }
}