/*
        tailwind-custom.css — кастомные Tailwind-директивы проекта hypn0
        (c) 2026, Sergei Erjemin
{% comment %}
ВНИМАНИЕ: этот файл не просто CSS! Это Django-шаблон, который подключается через
 include-тег в инлайновый блок <style type="text/tailwindcss"> шаблона _base.html.

ВАЖНО: этот файл содержит ТОЛЬКО директивы @theme/@layer, которые обязаны
  пройти через компилятор Tailwind, поэтому подключать его напрямую через
  <link rel="stylesheet"> НЕЛЬЗЯ — обычный браузерный CSS-парсер не понимает
  @theme/@apply и просто отбросит эти правила (проверено на практике: именно
  так "молчал" прежний hypn0.css).

ОЧЕНЬ ВАЖНО: Так как этот CSS-файл сам является Django-шаблоном (подключается
  инлайн через include-тег движка шаблонов), то внутри него НЕЛЬЗЯ писать буквенные
  примеры Django-тегов вида "открыть-процент include ... процент-закрыть" —
  движок шаблонов исполнит их по-настоящему, даже внутри CSS-комментария.
  Это может привести к бесконечным рекурсиям (файл случайно подключал
  сам себя) и другим непредсказуемым последствиям.
  Если использовать комментарии для шаблонов Django, как здесь, то это безопасно.

Файл используется в ДВУХ местах одновременно:
  1. В dev — подключается инклюд-тегом движка шаблонов Django ВНУТРИ
     инлайнового блока <style type="text/tailwindcss"> в _base.html.
     Именно этот блок сканирует и компилирует CDN-скрипт
     @tailwindcss/browser прямо в браузере (он видит только финальный DOM,
     а не внешние .css-файлы, подключённые через <link>).
  2. В prod — подключается через нативный CSS @import из
     frontend-assembly/tailwind/input.css в сборщике scripts/build-tailwind.sh.
     Результат Tailwind CLI собирает в public/static/css/tailwind.min.css
     (см. frontend-assembly/tailwind/package.json).

Поэтому здесь НЕТ строки `@import "tailwindcss";` — её добавляет каждый
"потребитель" данного файла САМ, непосредственно перед подключением этого
файла: инлайновый блок в _base.html (в dev) и input.css (в prod). Без
этого импорта директива @apply внутри @layer base ниже не сможет найти
используемые в ней стандартные классы (border-slate-500 и т.п.) и упадёт
с ошибкой "Cannot apply unknown utility class" — при этом в dev это ломает
ВООБЩЕ ВСЮ генерацию Tailwind CSS на странице (проверено на практике).
{% endcomment %}      */
@theme { /* -- Кастомные переменные цветов -- {% comment %}
  @theme задаёт кастомные токены цвета, которые можно использовать
  в Tailwind-классах через синтаксис, например, text-(--color-link)
  Это позволяет менять стили глобально, не бегая по шаблонам и не меняя конкретные
  классы, а просто перекрашивая токены цвета в одном месте. {% endcomment %} */
  --color-link: var(--color-slate-500);
  --color-link-hover: var(--color-indigo-800);
}

@custom-variant dark (&:where(.dark, .dark *));

@layer base { /* -- СЛОЙ BASE для Tailwind v4.0+ — см. https://tailwindcss.com/docs/layer-directive --{% comment %}
  Типовой стиль ссылки "по умолчанию" для всего проекта.

  Поэтому обычную текстовую ссылку теперь можно писать в шаблоне вообще без
  class="..." (просто тег a с href и текстом внутри, без единого класса) —
  и она сразу получит фирменный вид сайта (пунктирное подчёркивание,
  типовой цвет и ховер). Именно так сделано в block/breadcrumbs.html.

  ВАЖНЫЙ НЮАНС для ссылок, которые НЕ должны выглядеть как "типовая
  текстовая ссылка" (например, пункты меню-кнопок в block/header.html —
  там ссылка визуально оформлена как кнопка, а не как подчёркнутый текст):
  Tailwind v4 использует настоящие CSS cascade layers (@layer base,
  components, utilities...), и по их правилам слой `utilities` ВСЕГДА
  побеждает слой `base` независимо от специфичности селектора — НО только
  для тех CSS-свойств, которые реально заданы в utilities-классе на этом
  элементе. Если у пункта меню нет своего класса для color/border (как
  сейчас в header.html — там заданы только фон и отступы через
  hover:bg-gray-200, px-4 и т.п.), то свойства color/border-bottom он
  "унаследует" именно отсюда, а не из своего блочного оформления —
  родительский text-slate-900 на <menu> тут не поможет, т.к. у самого
  <a> появится СВОЙ явный color.
  Поэтому такие ссылки-кнопки должны явно "отключать" типовой стиль:
  добавить border-0 (убирает пунктир) и свой text-slate-900 dark:text-
  slate-100 (задаёт свой цвет вместо цвета типовой ссылки) — это и сделано
  в block/header.html.{% endcomment %} */
  a {
    @apply border-b border-dotted
      /* В светлой теме: глубокий изумрудный, в темной: блеклый лайм (отлично читается) */
      border-emerald-600 dark:border-lime-500
      text-emerald-600 dark:text-lime-400 transition duration-800
      /* При наведении: взрываем кислоту, но контролируемо */
      hover:text-emerald-500 dark:hover:text-lime-300 delay-300 duration-100
      hover:border-solid transition-colors transition duration-100;
  }
}