/* GroeiBoetiek Brand Override — CSS Variables Edition
 * These styles are loaded ONLY when brand == groeiboetiek.
 * They override Tailwind defaults via CSS custom properties.
 * ---------------------------------------------------------*/

/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

/* === Brand Color Palette (reference) ===
 * Accent (gold):     #cbb79f
 * Secondary (deep):  #a89279
 * Dark bg:           #2f343a
 * Text primary:      #1f2933
 * Text secondary:    #6b7280
 * Background warm:   #fbf9f6
 * Border subtle:     #e8e3dd
 * ========================================*/

/* === Core overrides using CSS variables === */

/* Body background */
body {
    background-color: var(--brand-bg, #fbf9f6) !important;
}

/* Headings get serif font */
h1,
h2,
h3 {
    font-family: var(--brand-font-heading, 'Playfair Display', Georgia, serif) !important;
    font-weight: var(--brand-font-heading-weight, 600) !important;
    letter-spacing: -0.02em;
}

/* Sidebar overrides */
.bg-sidebar {
    background-color: var(--brand-sidebar, #2f343a) !important;
}

/* ═══════════════════════════════════════════════
   INDIGO → Brand Accent (#cbb79f / #a89279)
   ═══════════════════════════════════════════════ */

/* --- Backgrounds --- */
.bg-indigo-50 {
    background-color: color-mix(in srgb, var(--brand-accent) 8%, white) !important;
}

.bg-indigo-100 {
    background-color: color-mix(in srgb, var(--brand-accent) 15%, white) !important;
}

.bg-indigo-200 {
    background-color: color-mix(in srgb, var(--brand-accent) 25%, white) !important;
}

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

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

.bg-indigo-700 {
    background-color: var(--brand-secondary) !important;
}

/* --- Text --- */
.text-indigo-300 {
    color: color-mix(in srgb, var(--brand-accent) 50%, white) !important;
}

.text-indigo-400 {
    color: color-mix(in srgb, var(--brand-accent) 70%, white) !important;
}

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

.text-indigo-600 {
    color: var(--brand-accent) !important;
}

.text-indigo-700 {
    color: var(--brand-secondary) !important;
}

.text-indigo-800 {
    color: var(--brand-secondary) !important;
}

.text-indigo-900 {
    color: var(--brand-text, #1f2933) !important;
}

/* --- Borders --- */
.border-indigo-100 {
    border-color: color-mix(in srgb, var(--brand-accent) 15%, white) !important;
}

.border-indigo-200 {
    border-color: color-mix(in srgb, var(--brand-accent) 25%, white) !important;
}

.border-indigo-300 {
    border-color: color-mix(in srgb, var(--brand-accent) 35%, white) !important;
}

.border-indigo-500 {
    border-color: var(--brand-accent) !important;
}

.border-indigo-600 {
    border-color: var(--brand-accent) !important;
}

/* --- Rings --- */
.ring-indigo-500 {
    --tw-ring-color: var(--brand-accent) !important;
}

.focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--brand-accent) !important;
}

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

/* --- Gradients --- */
.from-indigo-50 {
    --tw-gradient-from: color-mix(in srgb, var(--brand-accent) 8%, white) !important;
}

.from-indigo-500 {
    --tw-gradient-from: var(--brand-accent) !important;
}

.from-indigo-600 {
    --tw-gradient-from: var(--brand-accent) !important;
}

.to-indigo-600 {
    --tw-gradient-to: var(--brand-accent) !important;
}

.to-purple-50 {
    --tw-gradient-to: color-mix(in srgb, var(--brand-secondary) 8%, white) !important;
}

.to-purple-500 {
    --tw-gradient-to: var(--brand-secondary) !important;
}

.to-purple-600 {
    --tw-gradient-to: var(--brand-secondary) !important;
}

/* --- Hover states --- */
.hover\:bg-indigo-50:hover {
    background-color: color-mix(in srgb, var(--brand-accent) 8%, white) !important;
}

.hover\:bg-indigo-100:hover {
    background-color: color-mix(in srgb, var(--brand-accent) 15%, white) !important;
}

.hover\:bg-indigo-700:hover {
    background-color: var(--brand-secondary) !important;
}

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

.hover\:text-indigo-800:hover {
    color: var(--brand-secondary) !important;
}

.hover\:text-indigo-900:hover {
    color: var(--brand-text, #1f2933) !important;
}

.hover\:border-indigo-300:hover {
    border-color: color-mix(in srgb, var(--brand-accent) 35%, white) !important;
}

.hover\:from-indigo-100:hover {
    --tw-gradient-from: color-mix(in srgb, var(--brand-accent) 15%, white) !important;
}

.hover\:to-purple-100:hover {
    --tw-gradient-to: color-mix(in srgb, var(--brand-secondary) 15%, white) !important;
}

/* ═══════════════════════════════════════════════
   RED → Brand CTA (#1f2933 dark / accent tints)
   ═══════════════════════════════════════════════ */

/* --- Backgrounds --- */
.bg-red-50 {
    background-color: color-mix(in srgb, var(--brand-btn-cta) 6%, white) !important;
}

.bg-red-100 {
    background-color: color-mix(in srgb, var(--brand-btn-cta) 12%, white) !important;
}

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

.bg-red-600 {
    background-color: var(--brand-btn-cta) !important;
}

.bg-red-700 {
    background-color: var(--brand-btn-cta-hover) !important;
}

/* --- Text --- */
.text-red-500 {
    color: var(--brand-btn-cta) !important;
}

.text-red-600 {
    color: var(--brand-btn-cta) !important;
}

.text-red-700 {
    color: var(--brand-btn-cta) !important;
}

.text-red-800 {
    color: var(--brand-btn-cta-hover) !important;
}

.text-red-900 {
    color: var(--brand-btn-cta-hover) !important;
}

/* --- Borders --- */
.border-red-100 {
    border-color: color-mix(in srgb, var(--brand-btn-cta) 12%, white) !important;
}

.border-red-200 {
    border-color: color-mix(in srgb, var(--brand-btn-cta) 20%, white) !important;
}

.border-red-500 {
    border-color: var(--brand-btn-cta) !important;
}

/* --- Hover --- */
.hover\:bg-red-100:hover {
    background-color: color-mix(in srgb, var(--brand-btn-cta) 12%, white) !important;
}

.hover\:bg-red-700:hover {
    background-color: var(--brand-btn-cta-hover) !important;
}

.hover\:text-red-800:hover {
    color: var(--brand-btn-cta-hover) !important;
}

/* --- Gradients --- */
.from-red-600 {
    --tw-gradient-from: var(--brand-btn-cta) !important;
}

.to-orange-500 {
    --tw-gradient-to: var(--brand-accent) !important;
}

.from-red-200 {
    --tw-gradient-from: color-mix(in srgb, var(--brand-btn-cta) 20%, white) !important;
}

/* ═══════════════════════════════════════════════
   GREEN → Brand Accent (success = gold in GroeiBoetiek)
   ═══════════════════════════════════════════════ */

/* --- Backgrounds --- */
.bg-green-50 {
    background-color: color-mix(in srgb, var(--brand-accent) 8%, white) !important;
}

.bg-green-100 {
    background-color: color-mix(in srgb, var(--brand-accent) 15%, white) !important;
}

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

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

/* --- Text --- */
.text-green-400 {
    color: color-mix(in srgb, var(--brand-accent) 70%, white) !important;
}

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

.text-green-600 {
    color: var(--brand-accent) !important;
}

.text-green-700 {
    color: var(--brand-secondary) !important;
}

.text-green-800 {
    color: var(--brand-secondary) !important;
}

.text-green-900 {
    color: var(--brand-text, #1f2933) !important;
}

/* --- Borders --- */
.border-green-500 {
    border-color: var(--brand-accent) !important;
}

/* ═══════════════════════════════════════════════
   PURPLE → Brand Secondary (#a89279)
   ═══════════════════════════════════════════════ */

/* --- Backgrounds --- */
.bg-purple-50 {
    background-color: color-mix(in srgb, var(--brand-secondary) 8%, white) !important;
}

.bg-purple-100 {
    background-color: color-mix(in srgb, var(--brand-secondary) 15%, white) !important;
}

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

.bg-purple-700 {
    background-color: var(--brand-secondary) !important;
}

/* --- Text --- */
.text-purple-500 {
    color: var(--brand-secondary) !important;
}

.text-purple-600 {
    color: var(--brand-secondary) !important;
}

.text-purple-700 {
    color: var(--brand-secondary) !important;
}

.text-purple-800 {
    color: var(--brand-text, #1f2933) !important;
}

/* --- Borders --- */
.border-purple-100 {
    border-color: color-mix(in srgb, var(--brand-secondary) 15%, white) !important;
}

.border-purple-200 {
    border-color: color-mix(in srgb, var(--brand-secondary) 20%, white) !important;
}

/* --- Hover --- */
.hover\:bg-purple-700:hover {
    background-color: var(--brand-secondary) !important;
}

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

/* ═══════════════════════════════════════════════
   GRADIENT HERO OVERRIDES
   ═══════════════════════════════════════════════ */

/* About page hero gradient */
.about-hero {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand-accent) 8%, white) 0%,
            var(--brand-bg, #fbf9f6) 50%,
            color-mix(in srgb, var(--brand-secondary) 6%, white) 100%) !important;
}

/* ═══════════════════════════════════════════════
   FORM ELEMENT OVERRIDES (Tailwind CDN specifics)
   ═══════════════════════════════════════════════ */

/* Checkbox/radio accent color */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-accent) !important;
}

/* Slider / range input */
input[type="range"]::-webkit-slider-thumb {
    background-color: var(--brand-accent) !important;
}

/* ═══════════════════════════════════════════════
   MISCELLANEOUS OVERRIDES
   ═══════════════════════════════════════════════ */

/* Sidebar logo */
.sidebar-logo-bg {
    background-color: var(--brand-sidebar-logo, #cbb79f) !important;
}

/* Border overrides */
.border-gray-200 {
    border-color: var(--brand-border, #e8e3dd);
}

/* Score capsule tinting (more specific) */
.from-indigo-50 {
    --tw-gradient-from: color-mix(in srgb, var(--brand-accent) 8%, white) !important;
}

/* Hero gradient overrides for landing page */
.hero-gradient {
    background: linear-gradient(135deg, var(--brand-bg, #fbf9f6), color-mix(in srgb, var(--brand-accent) 5%, var(--brand-bg))) !important;
}

/* Social proof badge */
.brand-badge {
    background-color: color-mix(in srgb, var(--brand-accent, #cbb79f) 10%, white);
    border-color: color-mix(in srgb, var(--brand-accent, #cbb79f) 20%, white);
    color: var(--brand-text, #1f2933);
}

/* App card hover — warm accent glow */
.brand-card-hover:hover {
    border-color: var(--brand-accent, #cbb79f);
    box-shadow: 0 10px 25px rgba(203, 183, 159, 0.15);
}

/* Premium footer bar */
.brand-footer {
    background: linear-gradient(135deg, var(--brand-bg-dark, #2f343a), #1a1e24);
}

/* Animate pulse dot — red bg overridden via .bg-red-500 above */