/* =========================================================
   vctools.css — ЦВЕТОВАЯ БАЗА VCTools
   Фиолетово-белая минималистичная палитра. Одна на весь сайт.

   ПОДКЛЮЧЕНИЕ:
     <link rel="stylesheet" href="./css/vctools.css">
   Ставить ПОСЛЕДНИМ из стилей (после theme.css) на каждой странице.

   Селекторы намеренно усилены (html:root вместо :root), чтобы база
   перебивала :root-блоки старых файлов (logreg/chat/workspace/sender/
   settings.css) и тёмную палитру theme.css НЕЗАВИСИМО от порядка <link>.
   Специфичность: html:root (0,1,1) > :root (0,1,0)
                  html[data-theme="dark"]:root (0,2,1) > html[data-theme="dark"] (0,1,1)

   Старые токены --c-* оставлены как алиасы: страницы, которые их уже
   используют, автоматически становятся фиолетовыми без правок.
   В НОВОМ коде используйте канонические --v-*.
   ========================================================= */

html:root {
  color-scheme: light;

  /* ---------- Шрифты ---------- */
  --v-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --v-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* ---------- Фиолетовая шкала (ядро бренда) ---------- */
  --v-violet-50:  #f6f4ff;
  --v-violet-100: #ece7ff;
  --v-violet-200: #dcd3ff;
  --v-violet-300: #c3b2ff;
  --v-violet-400: #a586fc;
  --v-violet-500: #8b5cf6;
  --v-violet-600: #7c3aed;
  --v-violet-700: #6d28d9;
  --v-violet-800: #5b21b6;
  --v-violet-900: #4c1d95;

  /* ---------- Нейтральные (с фиолетовым подтоном) ---------- */
  --v-ink:        #16121f;
  --v-ink-soft:   #3f3a4d;
  --v-muted:      #6b6479;
  --v-muted-soft: #9d96ab;
  --v-line:       #ebe8f4;
  --v-line-strong:#d9d4e6;
  --v-tint:       #faf9fe;
  --v-white:      #ffffff;

  /* ---------- Семантические роли ---------- */
  --v-bg:            var(--v-white);
  --v-surface:       var(--v-white);
  --v-surface-2:     var(--v-tint);
  --v-text:          var(--v-ink);
  --v-text-soft:     var(--v-ink-soft);

  --v-primary:       var(--v-violet-600);
  --v-primary-hover: var(--v-violet-700);
  --v-primary-active:var(--v-violet-800);
  --v-primary-soft:  var(--v-violet-100);
  --v-primary-faint: var(--v-violet-50);
  --v-primary-bright:var(--v-violet-400);
  --v-on-primary:    #ffffff;

  /* Кольцо фокуса / свечение — одно на весь сайт */
  --v-ring:          rgba(124, 58, 237, 0.16);
  --v-ring-strong:   rgba(124, 58, 237, 0.32);

  /* Статусы (подобраны так, чтобы стоять рядом с фиолетовым) */
  --v-success:        #0d9f6e;
  --v-success-bg:     #e7f8f1;
  --v-success-border: #b6e8d5;

  --v-warn:           #b7791f;
  --v-warn-bg:        #fdf5e4;
  --v-warn-border:    #f0dcae;

  --v-danger:         #e11d48;
  --v-danger-hover:   #be123c;
  --v-danger-bg:      #fdeaef;
  --v-danger-border:  #f7c6d3;

  /* ---------- Радиусы ---------- */
  --v-r-xs: 6px;
  --v-r-sm: 10px;
  --v-r-md: 14px;
  --v-r-lg: 20px;
  --v-r-xl: 28px;
  --v-r-full: 999px;

  /* ---------- Тени (мягкие, с фиолетовым подтоном) ---------- */
  --v-shadow-sm: 0 1px 2px rgba(22, 18, 31, 0.05);
  --v-shadow-md: 0 4px 16px -4px rgba(22, 18, 31, 0.10);
  --v-shadow-lg: 0 18px 48px -12px rgba(76, 29, 149, 0.18);
  --v-shadow-primary: 0 10px 24px -8px rgba(124, 58, 237, 0.45);

  /* ---------- Фирменные градиенты ---------- */
  --v-grad-primary: linear-gradient(135deg, var(--v-violet-500), var(--v-violet-700));
  --v-grad-brand:   linear-gradient(160deg, #5b21b6 0%, #7c3aed 45%, #a586fc 100%);

  /* =======================================================
     АЛИАСЫ СТАРЫХ ТОКЕНОВ  (--c-* → фиолетовая база)
     Имена «blue» исторические: перекрашивают старые страницы
     без правок их CSS. В новом коде НЕ использовать.
     ======================================================= */
  --c-bg:            var(--v-bg);
  /* В старых страницах --c-surface — это КОНТРАСТНАЯ подложка к --c-bg
     (фон страницы, ховеры, заливки превью), а не белая карточка.
     Поэтому ведём его на surface-2, иначе в светлой теме подложка
     сливается с карточками. */
  --c-surface:       var(--v-surface-2);
  --c-text:          var(--v-text);
  --c-muted:         var(--v-muted);
  --c-muted-light:   var(--v-muted-soft);
  --c-border:        var(--v-line);
  --c-border-strong: var(--v-line-strong);

  --c-blue-50:       var(--v-primary-faint);
  --c-blue-100:      var(--v-primary-soft);
  --c-blue:          var(--v-primary);
  --c-blue-dark:     var(--v-primary-hover);
  --c-blue-light:    var(--v-primary-bright);

  --c-green:         var(--v-success);
  --c-green-bg:      var(--v-success-bg);
  --c-green-border:  var(--v-success-border);

  --c-amber:         var(--v-warn);
  --c-amber-bg:      var(--v-warn-bg);
  --c-amber-border:  var(--v-warn-border);

  --c-danger:        var(--v-danger);
  --c-danger-dark:   var(--v-danger-hover);
  --c-danger-bg:     var(--v-danger-bg);
  --c-danger-border: var(--v-danger-border);
}

/* =========================================================
   ТЁМНАЯ ТЕМА — фиолетово-чёрная (не синяя).
   Перебивает html[data-theme="dark"] из theme.css.
   ========================================================= */
html[data-theme="dark"]:root {
  color-scheme: dark;

  --v-ink:        #edeaf5;
  --v-ink-soft:   #cdc7dc;
  --v-muted:      #a49db5;
  --v-muted-soft: #756e87;
  --v-line:       #272033;
  --v-line-strong:#392f4d;
  --v-tint:       #1c1729;

  --v-bg:            #0c0a12;
  --v-surface:       #15111f;
  --v-surface-2:     #1c1729;
  --v-text:          var(--v-ink);
  --v-text-soft:     var(--v-ink-soft);

  /* На тёмном фоне ведущий тон светлее — иначе не читается */
  --v-primary:       var(--v-violet-400);
  --v-primary-hover: var(--v-violet-300);
  --v-primary-active:var(--v-violet-200);
  --v-primary-soft:  #2b1f47;
  --v-primary-faint: #1e1633;
  --v-primary-bright:var(--v-violet-300);
  --v-on-primary:    #16091f;

  --v-ring:          rgba(165, 134, 252, 0.20);
  --v-ring-strong:   rgba(165, 134, 252, 0.40);

  --v-success:        #34d399;
  --v-success-bg:     #0d2a20;
  --v-success-border: #1d5943;

  --v-warn:           #fbbf24;
  --v-warn-bg:        #2b2410;
  --v-warn-border:    #5c4a1a;

  --v-danger:         #fb7185;
  --v-danger-hover:   #f43f5e;
  --v-danger-bg:      #2c1119;
  --v-danger-border:  #5c2233;

  --v-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --v-shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.5);
  --v-shadow-lg: 0 18px 48px -12px rgba(0, 0, 0, 0.65);
  --v-shadow-primary: 0 10px 24px -8px rgba(124, 58, 237, 0.55);

  --v-grad-brand: linear-gradient(160deg, #2b1258 0%, #4c1d95 45%, #6d28d9 100%);
}

/* =========================================================
   Глобальные мелочи, вытекающие из базы
   ========================================================= */

::selection {
  background: var(--v-primary-soft);
  color: var(--v-text);
}

/* Кольцо фокуса у плавающей кнопки темы (в theme.css оно синее) */
#theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--v-ring-strong), var(--v-shadow-md);
}

/* Скроллбары в фирменном тоне */
html:root * {
  scrollbar-color: var(--v-line-strong) transparent;
}
html:root *::-webkit-scrollbar { width: 10px; height: 10px; }
html:root *::-webkit-scrollbar-track { background: transparent; }
html:root *::-webkit-scrollbar-thumb {
  background: var(--v-line-strong);
  border-radius: var(--v-r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
html:root *::-webkit-scrollbar-thumb:hover { background-color: var(--v-muted-soft); }