/**
 * Tony Brecka Theme
 * CSS variable overrides for dynamic theming
 */

[x-cloak] { display: none !important; }

/* ========================================
   DYNAMIC THEME COLOR OVERRIDES
   These override Tailwind's brand-* classes
   to use CSS variables from settings
   ======================================== */

/* Text colors */
.text-brand-400 {
	color: var(--color-primary-light) !important;
}

.text-brand-500 {
	color: var(--color-primary) !important;
}

.text-brand-600 {
	color: var(--color-primary-dark) !important;
}

/* Background colors */
.bg-brand-50 {
	background-color: color-mix(in srgb, var(--color-primary-light) 10%, white) !important;
}

.bg-brand-100 {
	background-color: color-mix(in srgb, var(--color-primary-light) 20%, white) !important;
}

.bg-brand-500 {
	background-color: var(--color-primary) !important;
}

.bg-brand-600 {
	background-color: var(--color-primary-dark) !important;
}

.bg-brand-700 {
	background-color: color-mix(in srgb, var(--color-primary-dark) 80%, black) !important;
}

/* Border colors */
.border-brand-500 {
	border-color: var(--color-primary) !important;
}

.border-brand-200 {
	border-color: color-mix(in srgb, var(--color-primary-light) 30%, white) !important;
}

/* Hover states */
.hover\:bg-brand-500:hover {
	background-color: var(--color-primary) !important;
}

.hover\:bg-brand-600:hover {
	background-color: var(--color-primary-dark) !important;
}

.hover\:bg-brand-700:hover {
	background-color: color-mix(in srgb, var(--color-primary-dark) 80%, black) !important;
}

.hover\:text-brand-400:hover {
	color: var(--color-primary-light) !important;
}

.hover\:text-brand-500:hover {
	color: var(--color-primary) !important;
}

.hover\:text-brand-600:hover {
	color: var(--color-primary-dark) !important;
}

.hover\:border-brand-500:hover {
	border-color: var(--color-primary) !important;
}

/* Focus states */
.focus\:ring-brand-500:focus {
	--tw-ring-color: var(--color-primary) !important;
}

.focus\:border-brand-500:focus {
	border-color: var(--color-primary) !important;
}

/* Ring colors */
.ring-brand-500 {
	--tw-ring-color: var(--color-primary) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.gradient-primary {
	background: var(--gradient-primary);
}

.text-gradient {
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ========================================
   BASE STYLES
   ======================================== */

html {
	scroll-behavior: smooth;
}

/* Form focus */
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: var(--color-primary);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-primary-dark);
}

/* Prose */
.prose {
	color: #374151;
	line-height: 1.75;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
	color: #111827;
	font-weight: 700;
}

.prose a {
	color: var(--color-primary);
}

.prose a:hover {
	color: var(--color-primary-dark);
}

.prose blockquote {
	border-left-color: var(--color-primary);
}