/* ═══════════════════════════════════════════════
   base.css — токены, сброс, типографика
   Основан на myu.to Design System v2.1
═══════════════════════════════════════════════ */

/* ── Шрифты ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --f-ui:      "Segoe UI Variable", "Segoe UI", "Outfit", system-ui, sans-serif;
  --f-display: "Segoe UI Variable Display", "Segoe UI", "Outfit", system-ui, sans-serif;
  /* Шрифт текстового логотипа. Отличается от интерфейсного намеренно:
     логотип должен читаться как марка, а не как ещё один заголовок. */
  --f-brand:   "Manrope", "Outfit", system-ui, sans-serif;
  --f-mono: "Segoe UI Variable", ui-monospace, monospace;

  /* Радиусы */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   10px;
  --r-2xl:  14px;
  --r-pill: 999px;

  /* Отступы */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Переходы */
  --t-fast: 0.14s ease;
  --t-base: 0.18s ease;
  --t-slow: 0.28s ease;

  /* Layout */
  --sidebar-w:  220px;
  /* Топбар подрос на 20%: 56 → 68. Всё в нём было слишком мелким. */
  --topbar-h:   68px;
  /* Единая высота управляющих элементов топбара. Раньше иконки были
     32px фиксированной высоты, а переключатели языка и валюты жили на
     padding 3px — из-за этого «настройки» выглядели чужеродно. */
  --topbar-ctl: 38px;
}

/* ── Тёмная тема (по умолчанию) ─────────────── */
[data-theme="dark"] {
  --c-bg:       #131315;
  --c-base:     #1c1c1f;
  --c-raised:   #252528;
  --c-stroke:   rgba(255, 255, 255, 0.072);
  --c-text:     #e3e3e6;
  --c-muted:    #858589;
  --c-accent:   #e5383b;
  --c-accent-s: rgba(229, 56, 59, 0.11);

  --c-ok:       #e5383b;
  --c-ok-green: #4ade80;
  --c-ok-s:     rgba(74, 222, 128, 0.08);
  --c-warn:     #fbbf24;
  --c-warn-s:   rgba(251, 191, 36, 0.08);

  /* Логотип — чёрный SVG перекрашивается в белый */
  --logo-filter: invert(1) brightness(2);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.25);
}

/* ── Светлая тема ───────────────────────────── */
[data-theme="light"] {
  --c-bg:       #f0f0f2;
  --c-base:     #f9f9fb;
  --c-raised:   #ffffff;
  --c-stroke:   rgba(0, 0, 0, 0.072);
  --c-text:     #1c1c1f;
  --c-muted:    #717175;
  --c-accent:   #cc2427;
  --c-accent-s: rgba(204, 36, 39, 0.09);

  --c-ok:       #e5383b;
  --c-ok-s:     rgba(22, 163, 74, 0.08);
  --c-warn:     #d97706;
  --c-warn-s:   rgba(217, 119, 6, 0.08);

  /* Логотип — чёрный SVG остаётся чёрным на светлом фоне */
  --logo-filter: none;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
}

/* ── Сброс ──────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Плавная смена темы — применяем к корню */
html {
  scroll-behavior: smooth;
  height: 100%;
  color-scheme: dark light;
  /* Фон html = фон body: убирает черные полосы при оверскролле на мобиле */
  background: var(--c-bg);
}

/* ── Иконки тёмной/светлой темы в кнопке ───── */
/* По умолчанию обе скрыты */
.theme-icon-sun  { display: none; }
.theme-icon-moon { display: none; }
/* Тёмная тема → показываем луну */
[data-theme="dark"]  .theme-icon-moon { display: inline-flex; }
/* Светлая тема → показываем солнце */
[data-theme="light"] .theme-icon-sun  { display: inline-flex; }

/* Все CSS-переменные интерполируются при смене data-theme */
html, html * {
  transition:
    background-color 0.28s ease,
    border-color     0.28s ease,
    color            0.18s ease,
    box-shadow       0.18s ease;
}

/* Исключаем анимируемые элементы чтобы не ломать их transitions */
html .spinner,
html .btn-spinner,
html .toast,
html .modal,
html .progress-fill {
  transition: none;
}

body {
  font-family: var(--f-ui);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--t-slow), color var(--t-slow);
  min-height: 100%;
  overflow-x: hidden;
}

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

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ── Скроллбар ──────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--c-stroke); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }
* { scrollbar-width: thin; scrollbar-color: var(--c-stroke) transparent; }

/* ── Типографика ────────────────────────────── */
.text-xs    { font-size: 11px; }
.text-sm    { font-size: 12px; }
.text-base  { font-size: 14px; }
.text-md    { font-size: 16px; }
.text-lg    { font-size: 20px; font-weight: 500; }
.text-xl    { font-size: 28px; font-weight: 600; }

.text-muted   { color: var(--c-muted); }
.text-accent  { color: var(--c-accent); }
.text-ok      { color: var(--c-ok); }
.text-warn    { color: var(--c-warn); }
.text-mono    { font-family: var(--f-mono); }

.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }

/* ── Статусные классы ───────────────────────── */
.status-ok       { color: var(--c-ok); }
.status-warn     { color: var(--c-warn); }
.status-critical { color: var(--c-accent); }
.status-muted    { color: var(--c-muted); }

/* ── Анимации ───────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}