/*
 * Theme: Warm (gold/brown)
 * Loaded only when body has class "theme-warm".
 *
 * Contrast strategy:
 *  - Variables drive accents/buttons + the dark navbar/footer (white text).
 *  - On LIGHT backgrounds (cream sections, cards): headings use a softer
 *    warm brown — dark enough to read, not pitch-black.
 *  - On DARK backgrounds (hero overlay, navbar, footer, CTA bands):
 *    text is forced white with text-shadow so it survives over photos.
 *  - Body text on light backgrounds stays soft-dark, never #000.
 */

body.theme-warm {
    --primary: #3d2817;          /* deep warm brown — used by dark navbar/footer */
    --primary-light: #5c3d24;
    --accent: #c8973a;           /* warm gold (CTA) */
    --accent-hover: #a87a26;
    --bg-warm: #fdf9f3;          /* cream page bg */
    --bg-sand: #f5ecdc;          /* warm sand */
    --bg-beige: #ead9be;
    --bg-dark: #3d2817;
    --bg-dark-alt: #4a3320;
    --text-dark: #2f2418;        /* soft dark for body text */
    --text-muted: #6b5a45;
    --gold: #c8973a;
    --cream: #fdf9f3;
    /* New: dedicated heading color for LIGHT backgrounds — softer than --primary */
    --heading-warm: #5a3a1f;
}

body.theme-warm {
    background: var(--bg-warm);
    color: var(--text-dark);
}

/* ─── Headings on LIGHT backgrounds ────────────────────────────
   Scoped to known light-bg containers — never blanket-applied
   so dark sections (hero, navbar, footer) keep their white text. */
body.theme-warm .section-cream h1,
body.theme-warm .section-cream h2,
body.theme-warm .section-cream h3,
body.theme-warm .card h1,
body.theme-warm .card h2,
body.theme-warm .card h3,
body.theme-warm main > * h2,
body.theme-warm main > * h3 {
    color: var(--heading-warm);
}

/* Body text on cream/light sections shouldn't be jet-black */
body.theme-warm .section-cream { color: var(--text-dark); }
body.theme-warm .section-cream p { color: var(--text-muted); }

/* ─── Hero overlay: ALWAYS white over photo ────────────────── */
body.theme-warm .hero-content-overlay,
body.theme-warm .hero-content-overlay h1,
body.theme-warm .hero-content-overlay h2,
body.theme-warm .hero-content-overlay p,
body.theme-warm .hero-content-overlay span {
    color: #ffffff !important;
}
body.theme-warm .hero-content-overlay h1 {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}
body.theme-warm .hero-content-overlay p {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
/* Strengthen the dark gradient on warm theme so light photos still get
   enough contrast against white text */
body.theme-warm .hero-overlay {
    background: linear-gradient(180deg, rgba(40, 25, 12, 0.35) 0%, rgba(40, 25, 12, 0.78) 100%) !important;
}

/* ─── Navbar (dark primary bg) ─────────────────────────────── */
body.theme-warm header#site-header nav[style*="background"] {
    background: var(--primary) !important;
}
body.theme-warm header#site-header nav,
body.theme-warm header#site-header nav a,
body.theme-warm header#site-header nav .nav-link {
    color: #ffffff;
}

/* Top utility bar (sand bg, dark text) */
body.theme-warm .top-utility-bar {
    background: var(--bg-sand);
    color: var(--text-muted);
    border-bottom-color: var(--bg-beige);
}
body.theme-warm .top-utility-bar a { color: var(--heading-warm); }

/* ─── Footer (dark primary bg, white text) ─────────────────── */
body.theme-warm footer[style*="background"] {
    background: var(--primary) !important;
}
body.theme-warm footer,
body.theme-warm footer h3,
body.theme-warm footer h4,
body.theme-warm footer p,
body.theme-warm footer a,
body.theme-warm footer span,
body.theme-warm footer li {
    color: #ffffff;
}
/* Preserve the existing opacity tints in the footer (50/60/70/40) by
   layering a high-contrast white instead of a tinted muted color */
body.theme-warm footer .opacity-50,
body.theme-warm footer .opacity-60,
body.theme-warm footer .opacity-70 { color: rgba(255, 255, 255, 0.85); }
body.theme-warm footer .opacity-40,
body.theme-warm footer .opacity-30 { color: rgba(255, 255, 255, 0.7); }

/* Footer CTA band heading must stay white */
body.theme-warm #footer-cta-band h3,
body.theme-warm #footer-cta-band p { color: #ffffff; }
body.theme-warm #footer-cta-band p { color: rgba(255, 255, 255, 0.85); }

/* ─── User-nav (dark teal-brown bg) ───────────────────────── */
body.theme-warm #user-nav { background: var(--primary-light); }
body.theme-warm .user-nav-link { color: rgba(255, 255, 255, 0.88); }
body.theme-warm .user-nav-link:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }

/* ─── CTA buttons: white text on gold, high-contrast ─────── */
body.theme-warm .btn-primary,
body.theme-warm a.btn-primary,
body.theme-warm button.btn-primary {
    background: var(--accent);
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 10px rgba(168, 122, 38, 0.30);
}
body.theme-warm .btn-primary:hover { background: var(--accent-hover); color: #ffffff; }
body.theme-warm .btn-accent { background: var(--accent); color: #ffffff; }
body.theme-warm .btn-accent:hover { background: var(--accent-hover); }

/* Outline buttons live on dark backgrounds (hero, footer) → keep white */
body.theme-warm .btn-outline { color: #ffffff; border-color: #ffffff; }
body.theme-warm .btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

/* Demo bypass keeps its warning visual but tinted to warm */
body.theme-warm .btn-demo-bypass { background: var(--accent); border-color: var(--accent-hover); color: #ffffff; }

/* ─── Utility colour helpers used in templates ────────────── */
body.theme-warm .text-primary { color: var(--heading-warm); }
body.theme-warm .bg-primary { background: var(--primary) !important; color: #ffffff; }
body.theme-warm .border-accent { border-color: var(--accent); }
body.theme-warm .text-gold { color: var(--gold); }

/* Cards: warmer shadow, off-white surface */
body.theme-warm .card {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(61, 40, 23, 0.08) !important;
    border: 1px solid rgba(200, 151, 58, 0.10);
}
body.theme-warm .card:hover {
    box-shadow: 0 12px 24px rgba(61, 40, 23, 0.14) !important;
}
body.theme-warm .shadow { box-shadow: 0 4px 12px rgba(61, 40, 23, 0.08) !important; }
body.theme-warm .shadow-md { box-shadow: 0 4px 16px rgba(61, 40, 23, 0.10) !important; }
body.theme-warm .shadow-lg { box-shadow: 0 6px 24px rgba(61, 40, 23, 0.12) !important; }

/* Status badges — readable on cream */
body.theme-warm .status-pending { background: #fff1cf; color: #6b4f10; }
body.theme-warm .status-active { background: #e2ecd9; color: #2d4a16; }
body.theme-warm .status-completed { background: #f1e4cc; color: #6b4a17; }
body.theme-warm .status-failed { background: #f8d7da; color: #721c24; }

/* Tailwind utility text helpers used in templates */
body.theme-warm .text-gray-900,
body.theme-warm .text-gray-800,
body.theme-warm .text-gray-700 { color: var(--text-dark); }
body.theme-warm .text-gray-600,
body.theme-warm .text-gray-500 { color: var(--text-muted); }
body.theme-warm .text-gray-400 { color: #8a7860; }

/* Chatbot widget retones */
body.theme-warm .chat-header { background: var(--primary); color: #ffffff; }
body.theme-warm .chat-send-btn { background: var(--primary); color: #ffffff; }
body.theme-warm .chat-send-btn:hover { background: var(--primary-light); }
body.theme-warm .chat-input-area textarea:focus { border-color: var(--accent); }
body.theme-warm .chat-toggle-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    box-shadow: 0 4px 20px rgba(61, 40, 23, 0.4);
}

/* Footer theme-switcher: keep visible against dark footer */
body.theme-warm .ab-theme-switcher,
body.theme-warm .ab-theme-switcher a,
body.theme-warm .ab-theme-switcher strong,
body.theme-warm .ab-theme-switcher span { color: rgba(255, 255, 255, 0.7); }
body.theme-warm .ab-theme-switcher a:hover { color: #ffffff; }