/* ============================================================
   Arkan dynamic brand-color theme layer.
   --brand-primary  = text / links / borders (shades up to 600)
   --brand-secondary = darker text/border accent (shades 700+)
   --brand-button   = button/badge solid backgrounds (independent control)
   Populated at load time by theme-loader.js from /theme-config.php
   ============================================================ */
:root {
  --brand-primary: #7a2b26;
  --brand-secondary: #5c201c;
  --brand-button: #7a2b26;
}

.accent-blue-500 { accent-color: var(--brand-primary) !important; }
.bg-blue-400\/10 { background-color: color-mix(in srgb, color-mix(in srgb, var(--brand-button) 68%, white) 10%, transparent) !important; }
.bg-blue-50 { background-color: color-mix(in srgb, var(--brand-button) 6%, white) !important; }
.bg-blue-50\/50 { background-color: color-mix(in srgb, color-mix(in srgb, var(--brand-button) 6%, white) 50%, transparent) !important; }
.bg-blue-50\/60 { background-color: color-mix(in srgb, color-mix(in srgb, var(--brand-button) 6%, white) 60%, transparent) !important; }
.bg-blue-500 { background-color: var(--brand-button) !important; }
.bg-blue-500\/10 { background-color: color-mix(in srgb, var(--brand-button) 10%, transparent) !important; }
.bg-blue-500\/15 { background-color: color-mix(in srgb, var(--brand-button) 15%, transparent) !important; }
.bg-blue-500\/20 { background-color: color-mix(in srgb, var(--brand-button) 20%, transparent) !important; }
.bg-blue-600 { background-color: color-mix(in srgb, var(--brand-button) 90%, black) !important; }
.bg-blue-700\/10 { background-color: color-mix(in srgb, var(--brand-button) 10%, transparent) !important; }
.bg-blue-900\/20 { background-color: color-mix(in srgb, color-mix(in srgb, var(--brand-button) 70%, black) 20%, transparent) !important; }
.border-blue-200 { border-color: color-mix(in srgb, var(--brand-primary) 24%, white) !important; }
.border-blue-300 { border-color: color-mix(in srgb, var(--brand-primary) 42%, white) !important; }
.border-blue-500 { border-color: var(--brand-primary) !important; }
.border-blue-500\/20 { border-color: color-mix(in srgb, var(--brand-primary) 20%, transparent) !important; }
.border-blue-500\/30 { border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent) !important; }
.border-blue-500\/40 { border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent) !important; }
@media (prefers-color-scheme: dark) { .dark\:text-blue-300 { color: color-mix(in srgb, var(--brand-primary) 42%, white) !important; } }
.focus\:border-blue-500:focus { border-color: var(--brand-primary) !important; }
.group:hover .group-hover\:text-blue-400 { color: color-mix(in srgb, var(--brand-primary) 68%, white) !important; }
.group:hover .group-hover\:text-blue-500 { color: var(--brand-primary) !important; }
.hover\:bg-blue-100:hover { background-color: color-mix(in srgb, var(--brand-button) 12%, white) !important; }
.hover\:bg-blue-500:hover { background-color: var(--brand-button) !important; }
.hover\:bg-blue-500\/20:hover { background-color: color-mix(in srgb, var(--brand-button) 20%, transparent) !important; }
.hover\:border-blue-300:hover { border-color: color-mix(in srgb, var(--brand-primary) 42%, white) !important; }
.hover\:border-blue-400:hover { border-color: color-mix(in srgb, var(--brand-primary) 68%, white) !important; }
.hover\:border-blue-500:hover { border-color: var(--brand-primary) !important; }
.hover\:border-blue-500\/50:hover { border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent) !important; }
.hover\:border-blue-500\/60:hover { border-color: color-mix(in srgb, var(--brand-primary) 60%, transparent) !important; }
.hover\:shadow-blue-600\/50:hover { --tw-shadow-color: color-mix(in srgb, color-mix(in srgb, var(--brand-button) 90%, black) 50%, transparent) !important; }
.hover\:text-blue-400:hover { color: color-mix(in srgb, var(--brand-primary) 68%, white) !important; }
.hover\:text-blue-500:hover { color: var(--brand-primary) !important; }
.hover\:text-blue-600:hover { color: color-mix(in srgb, var(--brand-primary) 90%, black) !important; }
.ring-blue-500\/50 { --tw-ring-color: color-mix(in srgb, var(--brand-primary) 50%, transparent) !important; }
.selection\:bg-blue-500 { background-color: var(--brand-button) !important; }
.selection\:bg-blue-600 { background-color: color-mix(in srgb, var(--brand-button) 90%, black) !important; }
.shadow-blue-600\/20 { --tw-shadow-color: color-mix(in srgb, color-mix(in srgb, var(--brand-button) 90%, black) 20%, transparent) !important; }
.shadow-blue-600\/25 { --tw-shadow-color: color-mix(in srgb, color-mix(in srgb, var(--brand-button) 90%, black) 25%, transparent) !important; }
.shadow-blue-600\/30 { --tw-shadow-color: color-mix(in srgb, color-mix(in srgb, var(--brand-button) 90%, black) 30%, transparent) !important; }
.text-blue-100 { color: color-mix(in srgb, var(--brand-primary) 12%, white) !important; }
.text-blue-200 { color: color-mix(in srgb, var(--brand-primary) 24%, white) !important; }
.text-blue-300 { color: color-mix(in srgb, var(--brand-primary) 42%, white) !important; }
.text-blue-400 { color: color-mix(in srgb, var(--brand-primary) 68%, white) !important; }
.text-blue-500 { color: var(--brand-primary) !important; }
.text-blue-500\/30 { color: color-mix(in srgb, var(--brand-primary) 30%, transparent) !important; }
.text-blue-600 { color: color-mix(in srgb, var(--brand-primary) 90%, black) !important; }
.text-blue-700 { color: var(--brand-secondary) !important; }
.text-blue-800 { color: color-mix(in srgb, var(--brand-secondary) 85%, black) !important; }