/* Дизайн-токены Маржинки. ЕДИНСТВЕННОЕ место, где живут цвета, шрифты,
 * отступы и радиусы. Компоненты (app.css) берут значения только отсюда.
 *
 * Как устроены темы:
 *   - :root            — светлая (значения по умолчанию);
 *   - @media dark      — тёмная для тех, кто не выбирал тему руками
 *                        (:not([data-theme="light"]) — ручной выбор главнее);
 *   - [data-theme=dark]— тёмная, выбранная кнопкой (хранится в localStorage,
 *                        ставится скриптом theme.js ДО отрисовки — без мигания).
 *
 * Акцент — индиго (#4F46E5): глубже и спокойнее прежнего голубого, отлично
 * читается в обеих темах и не путается со смысловыми цветами (зелёный/
 * янтарный/красный говорят только «хорошо/внимание/плохо»).
 * Фирменный градиент — индиго → бирюза.
 */

/* -- шрифты (локальные, web/static/fonts) ---------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* поверхности */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --border: #e5e8ee;
  --border-strong: #d3d8e2;

  /* текст */
  --text: #171b23;
  --text-2: #444d5c;
  --text-3: #7c8595;

  /* акцент: индиго */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eceafc;

  /* фирменный градиент: индиго → бирюза */
  --brand-a: #4f46e5;
  --brand-b: #06b6d4;
  --brand-grad: linear-gradient(135deg, var(--brand-a), var(--brand-b));

  /* семантика: насыщенный (текст/иконка) + мягкий (подложка) */
  --success: #0f8a4c;      --success-soft: #e5f5ec;
  --warning: #b06d08;      --warning-soft: #fdf2df;
  --danger:  #cc3a2e;      --danger-soft: #fdebe9;
  --info:    #4f46e5;      --info-soft: #eceafc;

  /* площадки: ТОЛЬКО для бейджей, не как акцент интерфейса */
  --mp-ozon: #005bff;      --mp-ozon-soft: #e5efff;
  --mp-wb:   #cb11ab;      --mp-wb-soft: #fbe7f7;

  /* графики */
  --chart-1: #4f46e5; --chart-2: #06b6d4; --chart-3: #f59e0b;
  --chart-4: #10b981; --chart-5: #ec4899; --chart-6: #8b5cf6;
  --chart-7: #64748b; --chart-8: #eab308;
  --chart-positive: #10b981;
  --chart-negative: #ef4444;

  /* боковое меню: нейтральная поверхность, чуть отличная от фона */
  --sidebar: #fbfbfd;
  --sidebar-border: #e7eaf0;
  --sidebar-ink: #414a5a;
  --sidebar-ink-dim: #8a93a3;
  --sidebar-active: #edeff4;
  --sidebar-title: #14171e;

  /* типографика */
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px;
  --text-xl: 20px; --text-2xl: 28px; --text-3xl: 36px;

  /* сетка и формы */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(23, 27, 35, .05), 0 1px 3px rgba(23, 27, 35, .06);
  --shadow-md: 0 6px 18px rgba(23, 27, 35, .12);
  --sidebar-w: 240px;

  /* -- старые имена: весь прежний CSS продолжает работать ------------------ */
  --ink: var(--text); --ink-2: var(--text-2); --ink-3: var(--text-3);
  --line: var(--border); --line-2: var(--surface-2);
  --good: var(--success); --good-soft: var(--success-soft);
  --warn: var(--warning); --warn-soft: var(--warning-soft);
  --bad: var(--danger);   --bad-soft: var(--danger-soft);
  --radius: var(--radius-md);
  --shadow: var(--shadow-sm); --shadow-lift: var(--shadow-md);
}

/* -- тёмная тема (самостоятельная палитра, не «инверсия») ------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --surface: #161a21;
    --surface-2: #1c212a;
    --border: #262c37;
    --border-strong: #333b49;

    --text: #e7eaf0;
    --text-2: #aab2bf;
    --text-3: #78828f;

    --accent: #818cf8;
    --accent-hover: #9ba6ff;
    --accent-soft: #232649;

    --success: #3fbf7c;      --success-soft: #12271b;
    --warning: #e0a33c;      --warning-soft: #2a2011;
    --danger:  #f0736a;      --danger-soft: #2c1614;
    --info:    #818cf8;      --info-soft: #232649;

    --mp-ozon: #4d8dff;      --mp-ozon-soft: #142642;
    --mp-wb:   #e668cf;      --mp-wb-soft: #331028;

    --chart-positive: #34d399;
    --chart-negative: #f87171;

    --sidebar: #12151b;
    --sidebar-border: #21262f;
    --sidebar-ink: #b6bec9;
    --sidebar-ink-dim: #6e7885;
    --sidebar-active: #1d222c;
    --sidebar-title: #f2f4f8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, .5);
  }
}

/* -- тёмная тема, выбранная кнопкой (значения те же, что выше) ------------- */
:root[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #161a21;
  --surface-2: #1c212a;
  --border: #262c37;
  --border-strong: #333b49;

  --text: #e7eaf0;
  --text-2: #aab2bf;
  --text-3: #78828f;

  --accent: #818cf8;
  --accent-hover: #9ba6ff;
  --accent-soft: #232649;

  --success: #3fbf7c;      --success-soft: #12271b;
  --warning: #e0a33c;      --warning-soft: #2a2011;
  --danger:  #f0736a;      --danger-soft: #2c1614;
  --info:    #818cf8;      --info-soft: #232649;

  --mp-ozon: #4d8dff;      --mp-ozon-soft: #142642;
  --mp-wb:   #e668cf;      --mp-wb-soft: #331028;

  --chart-positive: #34d399;
  --chart-negative: #f87171;

  --sidebar: #12151b;
  --sidebar-border: #21262f;
  --sidebar-ink: #b6bec9;
  --sidebar-ink-dim: #6e7885;
  --sidebar-active: #1d222c;
  --sidebar-title: #f2f4f8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, .5);
}

/* плавная смена темы: только поверхности, без текста графиков */
body, .side, .topbar, .card, .tile {
  transition: background-color .2s ease-out, border-color .2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}