/* ═══════════════════════════════════════════════════════════════════
   EcomConnector — дизайн-токены. Единственный источник цветов, шрифтов и радиусов.

   Одни и те же имена в двух темах:
     • тёмная (по умолчанию) — сайт: лендинг, инструкции, блог, страницы оплаты;
     • светлая, <html data-theme="light"> — рабочие инструменты: панель расширения
       в Google Таблицах (стоит вплотную к белому листу) и админка (плотные таблицы).

   Файл отдаётся с https://ecomconnector.ru/static/css/tokens.css — его подключают
   сайт, панель расширения и админка. Только переменные: никаких селекторов
   элементов, чтобы не задевать чужую вёрстку. Компоненты сайта — в ds.css.
   Правила бренда — brand/README.md.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Фоны */
  --bg:          #000000;
  --bg-subtle:   #0a0a0a;
  --bg-elevated: #0e0e0e;

  /* Серая шкала: 100 — ближе к фону, 1000 — ближе к тексту */
  --gray-100: #1a1a1a;
  --gray-200: #1f1f1f;
  --gray-300: #292929;
  --gray-400: #2e2e2e;
  --gray-500: #454545;
  --gray-600: #6e6e6e;
  --gray-700: #8f8f8f;
  --gray-900: #a1a1a1;
  --gray-1000:#ededed;

  /* Текст и границы */
  --fg:          #ededed;
  --fg-strong:   #ffffff;
  --fg-muted:    #a1a1a1;
  --fg-subtle:   #6e6e6e;
  --border:      #2e2e2e;
  --border-soft: rgba(255,255,255,.08);

  /* Главное действие — максимальный контраст с фоном: белая кнопка на тёмном, чёрная на светлом */
  --accent:       #ffffff;
  --accent-fg:    #000000;
  --accent-hover: #d4d4d4;

  /* Акценты — скупо */
  --blue:   #0072f5;
  --blue-2: #3291ff;
  --green:  #45a557;
  --green-2:#62c073;
  --amber:  #f5a623;
  --red:    #f56565;
  --purple: #8e4ec6;

  /* Статусы: текст + подложка */
  --success:    #62c073;
  --success-bg: rgba(69,165,87,.11);
  --warning:    #f5a623;
  --warning-bg: rgba(245,166,35,.11);
  --danger:     #f56565;
  --danger-bg:  rgba(245,101,101,.11);
  --info:       #3291ff;
  --info-bg:    rgba(0,114,245,.11);

  /* Форма */
  --radius-sm: 8px;    /* кнопки, поля, бейджи */
  --radius:    12px;   /* карточки */
  --radius-lg: 16px;   /* крупные панели */
  --shadow:    0 0 0 1px var(--border-soft);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);

  --ease: cubic-bezier(.4, 0, .2, 1);

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:          #fafafa;
  --bg-subtle:   #ffffff;
  --bg-elevated: #f4f4f4;

  --gray-100: #f2f2f2;
  --gray-200: #ebebeb;
  --gray-300: #e4e4e4;
  --gray-400: #d6d6d6;
  --gray-500: #b0b0b0;
  --gray-600: #8f8f8f;
  --gray-700: #6e6e6e;
  --gray-900: #5f5f5f;
  --gray-1000:#171717;

  --fg:          #171717;
  --fg-strong:   #0a0a0a;
  --fg-muted:    #5f5f5f;
  --fg-subtle:   #8f8f8f;
  --border:      #e4e4e4;
  --border-soft: #efefef;

  --accent:       #0a0a0a;
  --accent-fg:    #ffffff;
  --accent-hover: #2b2b2b;

  /* На светлом фоне акценты темнее — ради контраста текста (WCAG AA) */
  --success:    #16794a;
  --success-bg: #eef8f2;
  --warning:    #9a5b00;
  --warning-bg: #fdf6ea;
  --danger:     #c8372d;
  --danger-bg:  #fdf1f0;
  --info:       #0062d1;
  --info-bg:    #eef5fe;

  --shadow:    0 0 0 1px rgba(0,0,0,.055);
  --shadow-md: 0 4px 14px rgba(0,0,0,.08);

  color-scheme: light;
}