/* ============================================================================
   WordSense — единая дизайн-система (tokens).
   Подключать на каждой странице ПЕРВЫМ стилем.

   Контракт:
   • Цвета/размеры/радиусы — ТОЛЬКО через --ws-* переменные. Хардкод запрещён.
   • Шкалы цветов (purple/teal/amber/...) — для прямого использования
     (фон-метрик, баджи). Семантические алиасы (--ws-accent, --ws-text...) —
     для общих компонентов; их перекрывает выбранная тема.
   • Тёмная тема — автоматически через @media (prefers-color-scheme: dark).
   • Темы оформления — через [data-theme="..."] на <html>; меняют ТОЛЬКО
     группу --ws-accent-*. Если тема не задана — используется default (purple).
   • Кнопки — ТОЛЬКО через классы .ws-btn / .ws-btn--*. Никаких локальных
     padding/height/font-size для кнопок в страничных <style>.

   См. webapp/design/DESIGN_SYSTEM.md — полное руководство и компоненты.
   ========================================================================== */

:root {
  /* ── Палитра: шкалы Tabler-style (не меняются темами) ────────────────── */
  --ws-purple-50:  #F4F3FE;
  --ws-purple-100: #EEEDFE;
  --ws-purple-200: #CECBF6;
  --ws-purple-500: #534AB7;
  --ws-purple-700: #3C3489;
  --ws-purple-900: #26215C;

  --ws-teal-50:  #E1F5EE;
  --ws-teal-200: #9FE1CB;
  --ws-teal-500: #1D9E75;
  --ws-teal-700: #0F6E56;
  --ws-teal-900: #04342C;

  --ws-amber-50:  #FAEEDA;
  --ws-amber-200: #FAC775;
  --ws-amber-500: #EF9F27;
  --ws-amber-700: #854F0B;
  --ws-amber-900: #412402;

  --ws-coral-50:  #FAECE7;
  --ws-coral-200: #F0997B;
  --ws-coral-500: #D85A30;
  --ws-coral-700: #993C1D;
  --ws-coral-900: #4A1B0C;

  --ws-green-50:  #EAF3DE;
  --ws-green-500: #639922;
  --ws-green-700: #3B6D11;
  --ws-green-900: #173404;

  --ws-blue-50:  #E6F1FB;
  --ws-blue-200: #85B7EB;
  --ws-blue-500: #378ADD;
  --ws-blue-700: #185FA5;
  --ws-blue-900: #042C53;

  --ws-pink-50:  #FBEAF0;
  --ws-pink-200: #ED93B1;
  --ws-pink-500: #D4537E;
  --ws-pink-700: #993556;
  --ws-pink-900: #4B1528;

  --ws-red-50:  #FCEBEB;
  --ws-red-500: #E24B4A;
  --ws-red-700: #A32D2D;

  /* ── Нейтрали (light) ──────────────────────────────────────────────────── */
  --ws-bg:        #f4f3ef;
  --ws-surface:   #ffffff;
  --ws-surface-2: #f1f1f1;
  --ws-text:      #1a1a1a;
  --ws-text-2:    #6b6b6b;
  --ws-text-3:    #8a8a8a;
  --ws-border:    rgba(0,0,0,0.10);
  --ws-border-2:  rgba(0,0,0,0.25);
  --ws-divider:   rgba(0,0,0,0.08);

  /* ── Семантические алиасы (default = purple) ──────────────────────────── */
  --ws-accent:        var(--ws-purple-500);
  --ws-accent-strong: var(--ws-purple-700);
  --ws-accent-soft:   var(--ws-purple-100);
  --ws-accent-text:   #ffffff;
  --ws-accent-ink:    var(--ws-purple-700);

  --ws-success:      var(--ws-teal-500);
  --ws-success-soft: var(--ws-teal-50);
  --ws-success-ink:  var(--ws-teal-700);
  --ws-warning:      var(--ws-amber-500);
  --ws-warning-soft: var(--ws-amber-50);
  --ws-warning-ink:  var(--ws-amber-700);
  --ws-danger:       var(--ws-red-700);
  --ws-danger-soft:  var(--ws-red-50);

  /* ── Типографика ──────────────────────────────────────────────────────── */
  --ws-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ws-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ws-fs-xs:  11px;
  --ws-fs-sm:  12px;
  --ws-fs-md:  13px;
  --ws-fs-lg:  15px;
  --ws-fs-xl:  16px;
  --ws-fs-2xl: 18px;
  --ws-fs-3xl: 20px;
  --ws-fs-4xl: 24px;
  --ws-fw-regular:  400;
  --ws-fw-medium:   500;
  --ws-fw-semibold: 600;

  /* ── Радиусы ──────────────────────────────────────────────────────────── */
  --ws-radius-sm:  6px;
  --ws-radius-md:  8px;
  --ws-radius-lg:  12px;
  --ws-radius-xl:  16px;
  --ws-radius-2xl: 24px;
  --ws-radius-pill: 999px;

  /* ── Spacing (степ 4px) ───────────────────────────────────────────────── */
  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 20px;
  --ws-space-6: 24px;
  --ws-space-8: 32px;
  --ws-space-10: 40px;

  /* ── Компонентные токены (кнопки/инпуты — единая высота) ──────────────── */
  --ws-control-h:    44px;   /* основная высота (md) — тач-целевой 44px */
  --ws-control-h-sm: 36px;
  --ws-control-h-lg: 52px;
  --ws-control-px:    16px;  /* горизонт. padding md */
  --ws-control-px-sm: 12px;
  --ws-control-px-lg: 20px;
  --ws-control-fs:    var(--ws-fs-lg);   /* 15px */
  --ws-control-fs-sm: var(--ws-fs-md);   /* 13px */
  --ws-control-fs-lg: var(--ws-fs-xl);   /* 16px */

  --ws-focus-ring:   0 0 0 3px color-mix(in srgb, var(--ws-accent) 30%, transparent);
  --ws-shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --ws-shadow-md:    0 4px 12px rgba(0,0,0,0.08);
  --ws-shadow-lg:    0 10px 30px rgba(0,0,0,0.10);

  /* ── Layout breakpoints ───────────────────────────────────────────────── */
  --ws-bp-mobile:  480px;
  --ws-bp-tablet:  768px;
  --ws-bp-desktop: 900px;
  --ws-bp-wide:    1200px;

  /* ── Max-widths контейнеров ───────────────────────────────────────────── */
  --ws-w-narrow: 480px;
  --ws-w-page:   720px;
  --ws-w-wide:   960px;

  /* ── Animations ───────────────────────────────────────────────────────── */
  --ws-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ws-dur-fast:  120ms;
  --ws-dur:       200ms;
  --ws-dur-slow:  320ms;
}

/* ── Темы оформления (меняют ТОЛЬКО --ws-accent-*) ──────────────────────── */

[data-theme="ocean"] {
  --ws-accent:        var(--ws-blue-500);
  --ws-accent-strong: var(--ws-blue-700);
  --ws-accent-soft:   var(--ws-blue-50);
  --ws-accent-ink:    var(--ws-blue-700);
}
[data-theme="forest"] {
  --ws-accent:        var(--ws-green-500);
  --ws-accent-strong: var(--ws-green-700);
  --ws-accent-soft:   var(--ws-green-50);
  --ws-accent-ink:    var(--ws-green-700);
}
[data-theme="sunset"] {
  --ws-accent:        var(--ws-coral-500);
  --ws-accent-strong: var(--ws-coral-700);
  --ws-accent-soft:   var(--ws-coral-50);
  --ws-accent-ink:    var(--ws-coral-700);
}
[data-theme="rose"] {
  --ws-accent:        var(--ws-pink-500);
  --ws-accent-strong: var(--ws-pink-700);
  --ws-accent-soft:   var(--ws-pink-50);
  --ws-accent-ink:    var(--ws-pink-700);
}
[data-theme="graphite"] {
  --ws-accent:        #4a4a4a;
  --ws-accent-strong: #2a2a2a;
  --ws-accent-soft:   #ececec;
  --ws-accent-ink:    #2a2a2a;
}

/* ── Тёмная тема ──────────────────────────────────────────────────────── */
/* Активируется атрибутом data-color-scheme="dark" на <html>.
   Ранний инлайн-скрипт wsBoot (см. webapp/*.html) выставляет атрибут,
   учитывая выбор пользователя (localStorage.wsColorScheme: light|dark|auto)
   и системный prefers-color-scheme. CSS @media тут больше не используется,
   чтобы пользователь мог принудительно переключить тему. */

:root[data-color-scheme="dark"] {
    --ws-bg:        #131313;
    --ws-surface:   #1c1c1e;
    --ws-surface-2: #2c2c2e;
    --ws-text:      #f5f5f5;
    --ws-text-2:    #a8a8a8;
    --ws-text-3:    #7a7a7a;
    --ws-border:    rgba(255,255,255,0.12);
    --ws-border-2:  rgba(255,255,255,0.28);
    --ws-divider:   rgba(255,255,255,0.12);

    --ws-accent-soft: color-mix(in srgb, var(--ws-accent) 22%, transparent);
    --ws-accent-ink:  color-mix(in srgb, var(--ws-accent) 80%, white 20%);

    /* Светлые стопы (-50/-100/-200) на тёмном фоне выбиваются как яркие
       плитки — заменяем на затемнённые версии с тем же оттенком.
       Текст-стопы (-700/-900) подтягиваем к светлым (-200), чтобы оставаться
       читаемыми на затемнённых заливках. */
    --ws-purple-50:  color-mix(in srgb, #534AB7 22%, transparent);
    --ws-purple-100: color-mix(in srgb, #534AB7 28%, transparent);
    --ws-purple-700: #CECBF6;
    --ws-purple-900: #EEEDFE;

    --ws-teal-50:  color-mix(in srgb, #1D9E75 22%, transparent);
    --ws-teal-200: color-mix(in srgb, #1D9E75 30%, transparent);
    --ws-teal-700: #9FE1CB;
    --ws-teal-900: #E1F5EE;

    --ws-amber-50:  color-mix(in srgb, #EF9F27 24%, transparent);
    --ws-amber-200: color-mix(in srgb, #EF9F27 32%, transparent);
    --ws-amber-700: #FAC775;
    --ws-amber-900: #FAEEDA;

    --ws-coral-50:  color-mix(in srgb, #D85A30 22%, transparent);
    --ws-coral-200: color-mix(in srgb, #D85A30 30%, transparent);
    --ws-coral-700: #F0997B;
    --ws-coral-900: #FAECE7;

    --ws-green-50:  color-mix(in srgb, #639922 22%, transparent);
    --ws-green-700: #C0DD97;
    --ws-green-900: #EAF3DE;

    --ws-blue-50:  color-mix(in srgb, #378ADD 22%, transparent);
    --ws-blue-200: color-mix(in srgb, #378ADD 30%, transparent);
    --ws-blue-700: #85B7EB;
    --ws-blue-900: #E6F1FB;

    --ws-pink-50:  color-mix(in srgb, #D4537E 22%, transparent);
    --ws-pink-200: color-mix(in srgb, #D4537E 30%, transparent);
    --ws-pink-700: #ED93B1;
    --ws-pink-900: #FBEAF0;

    --ws-red-50:  color-mix(in srgb, #E24B4A 22%, transparent);
    --ws-red-700: #F7C1C1;

    --ws-shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --ws-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --ws-shadow-lg: 0 10px 30px rgba(0,0,0,0.40);
}

/* ── Системные правила, общие для всех страниц ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--ws-font);
  background: var(--ws-bg);
  color: var(--ws-text);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ws-focus-ring);
  border-radius: var(--ws-radius-sm);
}

::selection {
  background: var(--ws-accent-soft);
  color: var(--ws-accent-ink);
}

.ws-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   КНОПКИ — единственный источник правды.

   Применять .ws-btn ВСЕГДА. Добавлять варианты:
   • Размер:       .ws-btn--sm | (md по умолчанию) | .ws-btn--lg
   • Вариант:      .ws-btn--primary | .ws-btn--secondary (default) |
                   .ws-btn--ghost | .ws-btn--danger
   • Полная ширина: .ws-btn--block   (НЕ дефолт; в десктопе тоже только если нужно)
   • Иконка-only:  .ws-btn--icon     (квадратная, без текста)

   ВАЖНО: НЕ переопределять padding/height/font-size в страничных <style>.
   Если нужна нестандартная кнопка — добавь токен или модификатор сюда.
   ============================================================================ */

.ws-btn {
  /* Раскладка */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-space-2);
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  /* Размеры (md по умолчанию) */
  min-height: var(--ws-control-h);
  padding: 0 var(--ws-control-px);
  font-size: var(--ws-control-fs);
  /* Шрифт */
  font-family: inherit;
  font-weight: var(--ws-fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  /* Внешний вид (default = secondary) */
  background: var(--ws-surface);
  color: var(--ws-text);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  /* Поведение */
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--ws-dur-fast) var(--ws-ease),
              border-color var(--ws-dur-fast) var(--ws-ease),
              color var(--ws-dur-fast) var(--ws-ease),
              transform var(--ws-dur-fast) var(--ws-ease);
  -webkit-tap-highlight-color: transparent;
}

.ws-btn:hover  { background: var(--ws-surface-2); }
.ws-btn:active { transform: translateY(1px); }

.ws-btn:disabled,
.ws-btn[aria-disabled="true"],
.ws-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

/* Иконка внутри кнопки — задаётся через Tabler webfont. Принудительно
   фиксируем размер, чтобы кнопка не «росла» в высоту от случайной
   крупной иконки. */
.ws-btn > .ti,
.ws-btn > i[class^="ti-"],
.ws-btn > i[class*=" ti-"] {
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Размеры ────────────────────────────────────────────────────────────── */

.ws-btn--sm {
  min-height: var(--ws-control-h-sm);
  padding: 0 var(--ws-control-px-sm);
  font-size: var(--ws-control-fs-sm);
  border-radius: var(--ws-radius-sm);
  gap: var(--ws-space-1);
}

.ws-btn--lg {
  min-height: var(--ws-control-h-lg);
  padding: 0 var(--ws-control-px-lg);
  font-size: var(--ws-control-fs-lg);
  border-radius: var(--ws-radius-lg);
  gap: var(--ws-space-3);
}

/* ── Варианты ───────────────────────────────────────────────────────────── */

.ws-btn--primary {
  background: var(--ws-accent);
  color: var(--ws-accent-text);
  border-color: var(--ws-accent);
}
.ws-btn--primary:hover {
  background: var(--ws-accent-strong);
  border-color: var(--ws-accent-strong);
}

.ws-btn--ghost {
  background: transparent;
  color: var(--ws-text);
  border-color: transparent;
}
.ws-btn--ghost:hover {
  background: var(--ws-surface-2);
}

.ws-btn--danger {
  background: var(--ws-surface);
  color: var(--ws-danger);
  border-color: var(--ws-border);
}
.ws-btn--danger:hover {
  background: var(--ws-danger-soft);
  border-color: var(--ws-danger);
}

/* ── Модификаторы ───────────────────────────────────────────────────────── */

.ws-btn--block {
  display: flex;
  width: 100%;
}

.ws-btn--icon {
  padding: 0;
  width: var(--ws-control-h);
  min-width: var(--ws-control-h);
  gap: 0;
}
.ws-btn--icon.ws-btn--sm {
  width: var(--ws-control-h-sm);
  min-width: var(--ws-control-h-sm);
}
.ws-btn--icon.ws-btn--lg {
  width: var(--ws-control-h-lg);
  min-width: var(--ws-control-h-lg);
}
