/*
 * Marka rengi (site_color) admin panelinden dinamik olarak değiştirilebildiği için
 * Tailwind'in statik derlemesine dahil edilemez (derleme zamanında sabit bir renk gerekir).
 * Bu yüzden bu sınıflar CSS custom property (--site-color ve türevleri) kullanarak elle
 * yazılmıştır. Değişkenler includes/header.php (site) veya admin-header.php (admin panel)
 * içinde <style>:root{...}</style> ile enjekte edilir.
 *
 * Yeni bir brandTeal-ailesi sınıf kullanmak istersen (ör. "bg-brandTeal/50"),
 * buraya karşılığını eklemen gerekir — Tailwind CDN artık kullanılmadığı için
 * otomatik üretilmez.
 */
.accent-brandTeal { accent-color: var(--site-color); }

.bg-brandTeal { background-color: var(--site-color); }
.bg-brandTeal\/10 { background-color: rgba(var(--site-color-rgb), 0.1); }
.bg-brandTeal\/20 { background-color: rgba(var(--site-color-rgb), 0.2); }
.bg-brandTealLight { background-color: var(--site-color-light); }

.border-brandTeal\/20 { border-color: rgba(var(--site-color-rgb), 0.2); }
.border-brandTeal\/30 { border-color: rgba(var(--site-color-rgb), 0.3); }
.border-brandTeal\/40 { border-color: rgba(var(--site-color-rgb), 0.4); }
.border-brandTealLight\/30 { border-color: rgba(var(--site-color-light-rgb), 0.3); }

.focus\:border-brandTeal:focus { border-color: var(--site-color); }
.hover\:bg-brandTealDark:hover { background-color: var(--site-color-dark); }
.hover\:border-brandTeal:hover { border-color: var(--site-color); }
.hover\:text-brandTeal:hover { color: var(--site-color); }

.selection\:bg-brandTealLight ::selection { background-color: var(--site-color-light); }
.selection\:text-brandTealDark ::selection { color: var(--site-color-dark); }

.shadow-brandTealDark\/20 { --tw-shadow-color: rgba(var(--site-color-dark-rgb), 0.2); --tw-shadow: var(--tw-shadow-colored); }

.text-brandTeal { color: var(--site-color); }
.text-brandTealDark { color: var(--site-color-dark); }

.from-brandTealDark { --tw-gradient-from: var(--site-color-dark) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-brandTeal { --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--site-color) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-brandTealDark { --tw-gradient-to: var(--site-color-dark) var(--tw-gradient-to-position); }