/**
 * tokens.css — единая палитра ChefCRM (вариант C, h#090)
 * Создано 29.04.2026 — пересборка тёмной темы без DarkReader
 *
 * Принцип:
 *   - Каждый цвет в системе именован и описан здесь
 *   - В HTML/CSS вместо #fff/#1a1a1a/#2196F3 — var(--token)
 *   - Светлая (по умолчанию) и тёмная ([data-theme="dark"]) палитры
 *   - При смене темы переменные подменяются мгновенно — нет flash
 *
 * Палитра светлой темы — стиль Т-Банка (белый фон, светло-серые плитки, синий акцент)
 * Палитра тёмной темы — iOS true-black (фон #000, карточки #1c1c1e, синий акцент)
 */

:root {
  color-scheme: light;

  /* === Поверхности (фон страницы и слои) === */
  --bg-page:       #ffffff;  /* Основной фон страницы */
  --bg-elev-1:     #f4f6fa;  /* Карточки, плитки (1 уровень над фоном) */
  --bg-elev-2:     #eef1f5;  /* Карточки внутри карточек */
  --bg-elev-3:     #ffffff;  /* Модалки, выпадашки (на тёмном фоне будут светлее карточек) */
  --bg-overlay:    rgba(0,0,0,0.5);  /* Тёмная плёнка под модалкой */

  /* === Текст === */
  --text-primary:    #1a1a1a;  /* Основной текст */
  --text-secondary:  #6b7280;  /* Метки, подписи, вторичный текст */
  --text-tertiary:   #9ca3af;  /* Placeholder, очень слабый текст */
  --text-on-accent:  #ffffff;  /* Текст на синих/цветных кнопках */
  --text-disabled:   #c0c4cc;

  /* === Границы и линии === */
  --border-strong:  #d0d5dd;  /* Сильные границы (карточки, поля) */
  --border-soft:    #e5e7eb;  /* Мягкие линии (между строками) */
  --divider:        #f0f2f5;  /* Тончайший разделитель внутри списка */

  /* === Акцент (бренд) === */
  --accent:         #2196F3;
  --accent-hover:   #1976D2;
  --accent-active:  #1565C0;
  --accent-soft:    #e3f2fd;  /* Светлый фон под акцентным элементом */
  --accent-on:      #ffffff;

  /* === Состояния (статусы) === */
  --success:        #34c759;  /* Оплачено, отгружено, успех */
  --success-soft:   #e8f8eb;
  --success-on:     #ffffff;

  --warning:        #ff9500;  /* Внимание, частично, ждёт */
  --warning-soft:   #fff4e0;
  --warning-on:     #ffffff;

  --danger:         #ff3b30;  /* Ошибка, отмена, просрочка */
  --danger-soft:    #ffe8e6;
  --danger-on:      #ffffff;

  --info:           #5ac8fa;
  --info-soft:      #e0f4ff;
  --info-on:        #ffffff;

  /* === Тени === */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);

  /* === Нижнее меню (bottom-nav) === */
  --nav-bg:         #ffffff;
  --nav-border:     #e5e7eb;
  --nav-active:     #2196F3;
  --nav-inactive:   #6b7280;

  /* === Поля ввода === */
  --input-bg:       #f4f6fa;
  --input-border:   #d0d5dd;
  --input-focus:    #2196F3;
  --input-text:     #1a1a1a;
  --input-placeholder: #9ca3af;

  /* === Скроллбар === */
  --scroll-thumb:   #d0d5dd;
  --scroll-track:   transparent;

  /* === PWA-системные === */
  --pwa-status-bg:  #ffffff;  /* Цвет под статус-баром iPhone */
  --pwa-safe-area:  #ffffff;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-page:       #000000;
  --bg-elev-1:     #1c1c1e;
  --bg-elev-2:     #2c2c2e;
  --bg-elev-3:     #1c1c1e;
  --bg-overlay:    rgba(0,0,0,0.85);

  --text-primary:    #ffffff;
  --text-secondary:  #8e8e93;
  --text-tertiary:   #636366;
  --text-on-accent:  #ffffff;
  --text-disabled:   #48484a;

  --border-strong:  #38383a;
  --border-soft:    #2c2c2e;
  --divider:        #1f1f1f;

  --accent:         #2196F3;
  --accent-hover:   #42a5f5;
  --accent-active:  #1e88e5;
  --accent-soft:    #1f2933;
  --accent-on:      #ffffff;

  --success:        #34c759;
  --success-soft:   #1f3a23;
  --warning:        #ff9f0a;
  --warning-soft:   #3a2a0e;
  --danger:         #ff453a;
  --danger-soft:    #3a1816;
  --info:           #64d2ff;
  --info-soft:      #0e2a3a;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:  0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.5);

  --nav-bg:         #1c1c1e;
  --nav-border:     #2c2c2e;
  --nav-active:     #2196F3;
  --nav-inactive:   #8e8e93;

  --input-bg:       #2c2c2e;
  --input-border:   #38383a;
  --input-focus:    #2196F3;
  --input-text:     #ffffff;
  --input-placeholder: #636366;

  --scroll-thumb:   #38383a;
  --scroll-track:   transparent;

  --pwa-status-bg:  #000000;
  --pwa-safe-area:  #000000;
}

/* === Базовые правила тёмной темы (для непокрытых страниц-fallback) === */
[data-theme="dark"] {
  background: var(--bg-page);
  color: var(--text-primary);
}
[data-theme="dark"] body {
  background: var(--bg-page);
  color: var(--text-primary);
}

/* Скроллбар тонкий стилизованный */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }

/* Плавный переход цветов при смене темы (не для размеров — только для цветов) */
html.theme-transition,
html.theme-transition body,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}