/* Временные варианты оформления («Дизайн» в сайдбаре, см. core.design).
   Ничего в шаблонах не меняется — Tailwind v4 компилирует все утилитарные
   классы (bg-*, text-*, border-*, rounded-*) через CSS-переменные вида
   var(--color-gray-50), var(--radius-lg) и т.д. (проверено в собранном
   static/css/tailwind.css). Значит переопределить внешний вид целиком можно
   просто переопределив эти переменные в области видимости
   html[data-design="N"] — без единой правки самих страниц.

   «Изначальная версия» (design=1, mode=light) — вообще не затронута: ни
   одного правила ниже к ней не относится, это в точности исходный
   tailwind.css. Файл не обёрнут в @layer, поэтому автоматически
   перекрывает слой @layer theme/@layer utilities исходного tailwind.css
   независимо от порядка подключения.

   Смысловые цвета (успех/ошибка/предупреждение — green/red/amber) общие
   для всех вариантов и тем — это цвета-сигналы, их узнаваемость важнее
   стилистической индивидуальности варианта. Индивидуальность несут
   нейтральная палитра (gray/white), акцент (brand), шрифт, скругления. */

/* ===================================================================
   ОБЩИЕ СМЫСЛОВЫЕ ЦВЕТА ДЛЯ ТЁМНОЙ ТЕМЫ (варианты 1–2)
   =================================================================== */
html[data-mode="dark"] {
  --color-red-50: #2a1416;
  --color-red-200: #4a2328;
  --color-red-400: #f38686;
  --color-red-600: #ef4444;
  --color-red-700: #f87171;
  --color-green-50: #0f2416;
  --color-green-200: #1f4a2c;
  --color-green-700: #4ade80;
  --color-green-800: #6ee7a0;
  --color-amber-50: #2a2210;
  --color-amber-100: #3d3216;
  --color-amber-200: #5c4a1e;
  --color-amber-300: #7a622a;
  --color-amber-700: #eab308;
  --color-amber-800: #f2c94c;
  --color-amber-900: #f7d878;
}

/* Смысловые цвета для светлой темы варианта 2 (вариант 1/light не трогаем
   вовсе — у него остаются исходные значения tailwind.css). */
html[data-design="2"][data-mode="light"] {
  --color-red-50: #fef2f2;
  --color-red-200: #fecaca;
  --color-red-400: #f87171;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-green-50: #f0fdf4;
  --color-green-200: #bbf7d0;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
}

/* Кнопки-вторичные действия по всему приложению всегда через классы
   bg-gray-800/hover:bg-gray-900 (напр. «Применить»), а не через отдельный
   акцентный цвет — при инверсии серой шкалы под тёмную тему эти классы
   переопределяются здесь напрямую (а не через переменную), чтобы кнопка
   осталась тёмной и контрастной, независимо от того, что --color-gray-900
   в тёмной теме означает уже светлый (основной текст читается на тёмном
   фоне). */

/* ===================================================================
   ВАРИАНТ 1 — «Изначальная версия»: light не трогаем вообще,
   dark — тот же синий акцент, просто инвертированная яркость.
   =================================================================== */
html[data-design="1"][data-mode="dark"] {
  --color-gray-50: #0f1216;
  --color-gray-100: #171b21;
  --color-gray-200: #262c35;
  --color-gray-300: #333b46;
  --color-gray-400: #6b7684;
  --color-gray-500: #8b96a3;
  --color-gray-600: #a7b1bd;
  --color-gray-700: #c3cbd4;
  --color-gray-800: #b9c2cc;
  --color-gray-900: #eef1f4;
  --color-white: #1a1f26;
  --color-brand-50: #14213d;
  --color-brand-100: #1c2c4d;
  --color-brand-500: #5588e6;
  --color-brand-600: #4a7ad9;
  --color-brand-700: #8fb0ea;
}
html[data-design="1"][data-mode="dark"] .bg-gray-800,
html[data-design="1"][data-mode="dark"] .file\:bg-gray-800::file-selector-button {
  background-color: #2a3038;
}
html[data-design="1"][data-mode="dark"] .hover\:bg-gray-900:hover,
html[data-design="1"][data-mode="dark"] .hover\:file\:bg-gray-900:hover::file-selector-button {
  background-color: #384049;
}

/* ===================================================================
   ВАРИАНТ 2 — «Apple»: фирменный светло-серый фон Apple.com (#f5f5f7),
   почти чёрный текст (#1d1d1f), синий акцент «Buy»-кнопок (#0071e3),
   шрифт Inter (открытый аналог SF Pro, к которому он визуально ближе
   всего — сам SF Pro не лицензирован для веба), крупные мягкие скругления
   и почти неощутимые, сильно приглушённые тени вместо привычных
   «карточных» — тот самый премиальный минимализм с обилием воздуха.
   =================================================================== */
html[data-design="2"] {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --radius-md: 10px;
  --radius-lg: 18px;
}
html[data-design="2"] h1,
html[data-design="2"] h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
html[data-design="2"][data-mode="light"] {
  --color-gray-50: #f5f5f7;
  --color-gray-100: #ececee;
  --color-gray-200: #d9d9de;
  --color-gray-300: #c7c7cc;
  --color-gray-400: #aeaeb2;
  --color-gray-500: #8e8e93;
  --color-gray-600: #6e6e73;
  --color-gray-700: #48484a;
  --color-gray-800: #2c2c2e;
  --color-gray-900: #1d1d1f;
  --color-white: #ffffff;
  --color-brand-50: #e8f2fe;
  --color-brand-100: #cfe6fd;
  --color-brand-500: #0090ff;
  --color-brand-600: #0071e3;
  --color-brand-700: #0058b0;
}
html[data-design="2"][data-mode="dark"] {
  --color-gray-50: #000000;
  --color-gray-100: #1c1c1e;
  --color-gray-200: #2c2c2e;
  --color-gray-300: #3a3a3c;
  --color-gray-400: #636366;
  --color-gray-500: #8e8e93;
  --color-gray-600: #aeaeb2;
  --color-gray-700: #c7c7cc;
  --color-gray-800: #d1d1d6;
  --color-gray-900: #f5f5f7;
  --color-white: #1c1c1e;
  --color-brand-50: #062a4d;
  --color-brand-100: #0a3a66;
  --color-brand-500: #409cff;
  --color-brand-600: #0a84ff;
  --color-brand-700: #64b5ff;
}
html[data-design="2"][data-mode="dark"] .bg-gray-800,
html[data-design="2"][data-mode="dark"] .file\:bg-gray-800::file-selector-button {
  background-color: #2c2c2e;
}
html[data-design="2"][data-mode="dark"] .hover\:bg-gray-900:hover,
html[data-design="2"][data-mode="dark"] .hover\:file\:bg-gray-900:hover::file-selector-button {
  background-color: #3a3a3c;
}
/* Едва заметная, сильно рассеянная тень вместо «карточной» — то самое
   ощущение лёгкости/воздуха вместо явной приподнятости элемента. */
html[data-design="2"] .shadow,
html[data-design="2"] .hover\:shadow-md:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.04);
}
html[data-design="2"] .shadow-md {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.05);
}
html[data-design="2"] .shadow-lg,
html[data-design="2"] .shadow-xl {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 8px 30px rgba(0, 0, 0, 0.08);
}
html[data-design="2"][data-mode="dark"] .shadow,
html[data-design="2"][data-mode="dark"] .hover\:shadow-md:hover,
html[data-design="2"][data-mode="dark"] .shadow-md,
html[data-design="2"][data-mode="dark"] .shadow-lg,
html[data-design="2"][data-mode="dark"] .shadow-xl {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.35);
}