/* =============================================================================
 * Фоллбэк color-mix() для WebKit < 16.2
 * -----------------------------------------------------------------------------
 * Tailwind v4 кодирует КАЖДЫЙ opacity-тинт (`bg-primary/10`, `variant="soft"`,
 * `bg-primary/15`, чипсы, нотисы и т.д.) как
 *     background-color: color-mix(in oklab, var(--ui-primary) 10%, transparent);
 * а в качестве базы (вне @supports) кладёт СПЛОШНОЙ цвет `var(--ui-...)`.
 * `color-mix()` появился только в Safari 16.2 — на 16.0/16.1 @supports-апгрейд
 * пропускается, тинт-фон становится непрозрачным, и текст/иконка того же цвета
 * сливаются с фоном.
 *
 * Здесь возвращаем полупрозрачность через rgb()/alpha (есть с Safari 9) только
 * для браузеров без color-mix. Правила вне @layer → на старом WebKit перебивают
 * слоёные утилиты Tailwind; на новых браузерах @supports not делает блок инертным.
 *
 * Файл отдаётся статикой из public/ и подключается <link>-ом в nuxt.config,
 * МИМО Tailwind/Lightning CSS — иначе Lightning выкинул бы @supports not как
 * «мёртвый код» (таргет сборки Safari 16.4+ поддерживает color-mix).
 *
 * Покрыты семантические цвета (primary/secondary/success/info/warning/error) и
 * numbered-shade primary-NNN. rgb-значения = palette.css, light-режим (app всегда
 * light). При смене палитры/цветов — обновить значения здесь.
 * Сгенерировано из собранного CSS; при апгрейде @nuxt/ui — перегенерировать.
 * ========================================================================== */

@supports not (color: color-mix(in lab, red, red)) {

  /* --ui-primary → #3bbdad (turquoise-500) */
  .bg-primary\/5 { background-color: rgb(59 189 173 / .05) }
  .ring-primary\/10 { --tw-ring-color: rgb(59 189 173 / .10) }
  .active\:bg-primary\/10:active { background-color: rgb(59 189 173 / .10) }
  .bg-primary\/10 { background-color: rgb(59 189 173 / .10) }
  .disabled\:bg-primary\/10:disabled { background-color: rgb(59 189 173 / .10) }
  .focus-visible\:bg-primary\/10:focus-visible { background-color: rgb(59 189 173 / .10) }
  .hover\:bg-primary\/10:hover { background-color: rgb(59 189 173 / .10) }
  .active\:bg-primary\/15:active { background-color: rgb(59 189 173 / .15) }
  .bg-primary\/15 { background-color: rgb(59 189 173 / .15) }
  .focus-visible\:bg-primary\/15:focus-visible { background-color: rgb(59 189 173 / .15) }
  .hover\:bg-primary\/15:hover { background-color: rgb(59 189 173 / .15) }
  .ring-primary\/20 { --tw-ring-color: rgb(59 189 173 / .20) }
  .border-primary\/20 { border-color: rgb(59 189 173 / .20) }
  .ring-primary\/25 { --tw-ring-color: rgb(59 189 173 / .25) }
  .ring-primary\/30 { --tw-ring-color: rgb(59 189 173 / .30) }
  .ring-primary\/50 { --tw-ring-color: rgb(59 189 173 / .50) }
  .focus-visible\:outline-primary\/50:focus-visible { outline-color: rgb(59 189 173 / .50) }
  .ring-primary\/60 { --tw-ring-color: rgb(59 189 173 / .60) }
  .active\:bg-primary\/75:active { background-color: rgb(59 189 173 / .75) }
  .hover\:bg-primary\/75:hover { background-color: rgb(59 189 173 / .75) }
  .hover\:bg-primary\/90:hover { background-color: rgb(59 189 173 / .90) }

  /* --ui-secondary → #ff6b0c (sejaro-500) */
  .active\:bg-secondary\/10:active { background-color: rgb(255 107 12 / .10) }
  .bg-secondary\/10 { background-color: rgb(255 107 12 / .10) }
  .disabled\:bg-secondary\/10:disabled { background-color: rgb(255 107 12 / .10) }
  .focus-visible\:bg-secondary\/10:focus-visible { background-color: rgb(255 107 12 / .10) }
  .hover\:bg-secondary\/10:hover { background-color: rgb(255 107 12 / .10) }
  .active\:bg-secondary\/15:active { background-color: rgb(255 107 12 / .15) }
  .focus-visible\:bg-secondary\/15:focus-visible { background-color: rgb(255 107 12 / .15) }
  .hover\:bg-secondary\/15:hover { background-color: rgb(255 107 12 / .15) }
  .ring-secondary\/25 { --tw-ring-color: rgb(255 107 12 / .25) }
  .ring-secondary\/50 { --tw-ring-color: rgb(255 107 12 / .50) }
  .focus-visible\:outline-secondary\/50:focus-visible { outline-color: rgb(255 107 12 / .50) }
  .active\:bg-secondary\/75:active { background-color: rgb(255 107 12 / .75) }
  .hover\:bg-secondary\/75:hover { background-color: rgb(255 107 12 / .75) }
  .hover\:bg-secondary\/90:hover { background-color: rgb(255 107 12 / .90) }

  /* --ui-success → #3aebb0 (mint-500) */
  .active\:bg-success\/10:active { background-color: rgb(58 235 176 / .10) }
  .bg-success\/10 { background-color: rgb(58 235 176 / .10) }
  .disabled\:bg-success\/10:disabled { background-color: rgb(58 235 176 / .10) }
  .focus-visible\:bg-success\/10:focus-visible { background-color: rgb(58 235 176 / .10) }
  .hover\:bg-success\/10:hover { background-color: rgb(58 235 176 / .10) }
  .active\:bg-success\/15:active { background-color: rgb(58 235 176 / .15) }
  .focus-visible\:bg-success\/15:focus-visible { background-color: rgb(58 235 176 / .15) }
  .hover\:bg-success\/15:hover { background-color: rgb(58 235 176 / .15) }
  .ring-success\/25 { --tw-ring-color: rgb(58 235 176 / .25) }
  .ring-success\/50 { --tw-ring-color: rgb(58 235 176 / .50) }
  .focus-visible\:outline-success\/50:focus-visible { outline-color: rgb(58 235 176 / .50) }
  .active\:bg-success\/75:active { background-color: rgb(58 235 176 / .75) }
  .hover\:bg-success\/75:hover { background-color: rgb(58 235 176 / .75) }
  .hover\:bg-success\/90:hover { background-color: rgb(58 235 176 / .90) }

  /* --ui-info → #0077ff (neptune-500) */
  .active\:bg-info\/10:active { background-color: rgb(0 119 255 / .10) }
  .bg-info\/10 { background-color: rgb(0 119 255 / .10) }
  .disabled\:bg-info\/10:disabled { background-color: rgb(0 119 255 / .10) }
  .focus-visible\:bg-info\/10:focus-visible { background-color: rgb(0 119 255 / .10) }
  .hover\:bg-info\/10:hover { background-color: rgb(0 119 255 / .10) }
  .active\:bg-info\/15:active { background-color: rgb(0 119 255 / .15) }
  .focus-visible\:bg-info\/15:focus-visible { background-color: rgb(0 119 255 / .15) }
  .hover\:bg-info\/15:hover { background-color: rgb(0 119 255 / .15) }
  .ring-info\/25 { --tw-ring-color: rgb(0 119 255 / .25) }
  .ring-info\/50 { --tw-ring-color: rgb(0 119 255 / .50) }
  .focus-visible\:outline-info\/50:focus-visible { outline-color: rgb(0 119 255 / .50) }
  .active\:bg-info\/75:active { background-color: rgb(0 119 255 / .75) }
  .hover\:bg-info\/75:hover { background-color: rgb(0 119 255 / .75) }
  .hover\:bg-info\/90:hover { background-color: rgb(0 119 255 / .90) }

  /* --ui-warning → #ffa400 (marigold-500) */
  .active\:bg-warning\/10:active { background-color: rgb(255 164 0 / .10) }
  .bg-warning\/10 { background-color: rgb(255 164 0 / .10) }
  .disabled\:bg-warning\/10:disabled { background-color: rgb(255 164 0 / .10) }
  .focus-visible\:bg-warning\/10:focus-visible { background-color: rgb(255 164 0 / .10) }
  .hover\:bg-warning\/10:hover { background-color: rgb(255 164 0 / .10) }
  .active\:bg-warning\/15:active { background-color: rgb(255 164 0 / .15) }
  .focus-visible\:bg-warning\/15:focus-visible { background-color: rgb(255 164 0 / .15) }
  .hover\:bg-warning\/15:hover { background-color: rgb(255 164 0 / .15) }
  .ring-warning\/25 { --tw-ring-color: rgb(255 164 0 / .25) }
  .ring-warning\/50 { --tw-ring-color: rgb(255 164 0 / .50) }
  .focus-visible\:outline-warning\/50:focus-visible { outline-color: rgb(255 164 0 / .50) }
  .active\:bg-warning\/75:active { background-color: rgb(255 164 0 / .75) }
  .hover\:bg-warning\/75:hover { background-color: rgb(255 164 0 / .75) }
  .hover\:bg-warning\/90:hover { background-color: rgb(255 164 0 / .90) }

  /* --ui-error → #ed2636 (crimson-500) */
  .active\:bg-error\/10:active { background-color: rgb(237 38 54 / .10) }
  .bg-error\/10 { background-color: rgb(237 38 54 / .10) }
  .disabled\:bg-error\/10:disabled { background-color: rgb(237 38 54 / .10) }
  .focus-visible\:bg-error\/10:focus-visible { background-color: rgb(237 38 54 / .10) }
  .hover\:bg-error\/10:hover { background-color: rgb(237 38 54 / .10) }
  .active\:bg-error\/15:active { background-color: rgb(237 38 54 / .15) }
  .focus-visible\:bg-error\/15:focus-visible { background-color: rgb(237 38 54 / .15) }
  .hover\:bg-error\/15:hover { background-color: rgb(237 38 54 / .15) }
  .ring-error\/25 { --tw-ring-color: rgb(237 38 54 / .25) }
  .ring-error\/50 { --tw-ring-color: rgb(237 38 54 / .50) }
  .focus-visible\:outline-error\/50:focus-visible { outline-color: rgb(237 38 54 / .50) }
  .active\:bg-error\/75:active { background-color: rgb(237 38 54 / .75) }
  .hover\:bg-error\/75:hover { background-color: rgb(237 38 54 / .75) }
  .hover\:bg-error\/90:hover { background-color: rgb(237 38 54 / .90) }

  /* --ui-color-primary-50 → #f0fbf9 (turquoise-50) */
  .bg-primary-50\/50 { background-color: rgb(240 251 249 / .50) }
  .bg-primary-50\/80 { background-color: rgb(240 251 249 / .80) }

  /* --ui-color-primary-300 → #78dacb (turquoise-300) */
  .bg-primary-300\/10 { background-color: rgb(120 218 203 / .10) }

  /* --ui-color-primary-400 → #54cbba (turquoise-400) */
  .bg-primary-400\/10 { background-color: rgb(84 203 186 / .10) }
  .bg-primary-400\/15 { background-color: rgb(84 203 186 / .15) }

  /* --ui-color-primary-500 → #3bbdad (turquoise-500) */
  .bg-primary-500\/10 { background-color: rgb(59 189 173 / .10) }
}