/* ─────────────────────────────────────────────────────────────
   Lingavela — Дизайн-кит · токены Sunset v2
   Чистая основа для переноса в другие проекты (сайт, лендинг…).
   Только выбранная тема: тёмная + светлая. Шрифт Onest.
   Подключение:  <link rel="stylesheet" href="tokens.css">
   На корневом элементе:  class="palette-sunset2 theme-dark"  (или theme-light)
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

:root {
  --font-sans: 'Onest', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-pop: 0 4px 0 0 var(--shadow-color, rgba(0,0,0,0.4));
  --shadow-pop-lg: 0 6px 0 0 var(--shadow-color, rgba(0,0,0,0.5));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { font-feature-settings: "cv01", "cv02", "ss01"; }

/* ── Тема Sunset v2 — ТЁМНАЯ ── */
.palette-sunset2.theme-dark {
  --bg: #15100e;
  --bg-gradient: radial-gradient(120% 80% at 100% 0%, #2a1a14 0%, #15100e 60%);
  --surface: #1f1612;
  --surface-2: #2b1f18;
  --surface-3: #3a2b22;
  --border: rgba(255,180,100,0.08);
  --text: #fdf4e8;
  --text-2: #c4a88a;
  --text-3: #7d6857;
  --accent: #FF6B35;
  --accent-ink: #ffffff;
  --accent-2: #FFC93D;
  --accent-2-ink: #2a1c00;
  --success: #4ADE80;
  --success-ink: #052b1f;
  --danger: #FF5470;
  --danger-ink: #2b0810;
  --info: #5BC0EB;
  --info-ink: #00202c;
  --warning: #FFD23F;
  --warning-ink: #2a1c00;
  --frost: #7DF9FF;
  --frost-ink: #00242a;
  --shadow-color: rgba(0,0,0,0.55);
}

/* ── Тема Sunset v2 — СВЕТЛАЯ ── */
.palette-sunset2.theme-light {
  --bg: #fff5e8;
  --bg-gradient: radial-gradient(120% 80% at 100% 0%, #ffe0c2 0%, #fff5e8 70%);
  --surface: #ffffff;
  --surface-2: #ffe9d4;
  --surface-3: #fcd2a8;
  --border: rgba(80,30,10,0.08);
  --text: #1e0d05;
  --text-2: #5c4633;
  --text-3: #927964;
  --accent: #FF5A1F;
  --accent-ink: #ffffff;
  --accent-2: #E89B0E;
  --accent-2-ink: #ffffff;
  --success: #2D9D78;
  --success-ink: #ffffff;
  --danger: #E63946;
  --danger-ink: #ffffff;
  --info: #1D7BB8;
  --info-ink: #ffffff;
  --warning: #C99A37;
  --warning-ink: #ffffff;
  --frost: #4FC3DC;
  --frost-ink: #ffffff;
  --shadow-color: rgba(80,30,0,0.2);
}

/* Закатный градиент-фон для корневого элемента темы */
.palette-sunset2 { background: var(--bg-gradient); color: var(--text); }

/* ── Цвета плашек активностей — отдельно под каждую тему ──
   Используются как фон значков/карточек. Можно брать через var(--tile-…). */
.palette-sunset2.theme-dark {
  --tile-words: #FF6B35;     /* Слова */
  --tile-speed: #FFC93D;     /* Скоростная игра */
  --tile-lesson: #5BC0EB;    /* Урок дня */
  --tile-grammar: #9B72FF;   /* Грамматика */
  --tile-listen: #1FD8C4;    /* Аудирование */
  --tile-speak: #FF7A73;     /* Произношение */
  --tile-write: #FB6FA6;     /* Свободное сочинение */
  --tile-dialog: #3CDD78;    /* Диалоги */
}
.palette-sunset2.theme-light {
  --tile-words: #F2541B;
  --tile-speed: #EBA20A;
  --tile-lesson: #1E90C4;
  --tile-grammar: #8A4FE0;
  --tile-listen: #14BCAC;
  --tile-speak: #F26A62;
  --tile-write: #E85C97;
  --tile-dialog: #28C266;
}

/* ─────────────────────────────────────────────────────────────
   Базовые атомы
   ──────────────────────────────────────────────────────────── */

/* 3D-кнопка «pop» — плотная тень-сдвиг, вдавливается при нажатии */
.btn3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  position: relative;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-pop);
  white-space: nowrap;
}
.btn3d:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--shadow-color);
}
.btn3d.secondary { background: var(--accent-2); color: var(--accent-2-ink); }
.btn3d.success   { background: var(--success);  color: var(--success-ink); }
.btn3d.danger    { background: var(--danger);   color: var(--danger-ink); }

/* Круглая кнопка закрытия */
.btn-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
}

/* Карточка-поверхность */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* Полоса прогресса */
.progress-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar > div {
  height: 100%;
  background: var(--accent-2);
  border-radius: 999px;
}

/* Текстовые хелперы */
.muted   { color: var(--text-2); }
.muted-2 { color: var(--text-3); }