/*
 * Global Theme Styles
 * This file uses CSS variables from the theme settings database
 * All colors reference --theme-* variables which can be configured in Admin > Theme Settings
 */

/* ==========================================================================
   BOOTSTRAP CSS VARIABLE OVERRIDES
   These ensure our theme colors take precedence over Bootstrap defaults
   ========================================================================== */

:root {
    --bs-link-color: var(--theme-link, #6B4423);
    --bs-link-hover-color: var(--theme-link-hover, #8B5A2B);
    --bs-primary: var(--theme-primary, #6B4423);
    --bs-secondary: var(--theme-secondary, #5C7050);
    --bs-body-color: var(--theme-text-primary, #4A4540);
    --bs-body-bg: var(--theme-bg-primary, #FFFFFF);
}

/* ==========================================================================
   BASE ELEMENTS
   ========================================================================== */

body {
    background-color: var(--theme-bg-primary, #FFFFFF);
    color: var(--theme-text-primary, #4A4540);
}

/* Headings - use neutral text color for readability, accent color only for specific branded sections */
h1, h2, h3, h4, h5, h6 {
    color: var(--theme-text-primary, #4A4540);
}

/* Branded section headings use accent color */
.section-header,
.page-title,
.hero h1, .hero h2,
.holler-hero h1, .holler-hero h2 {
    color: var(--theme-text-heading, #6B4423);
}

/* Card Titles */
.card h5, .card h6, .card-title {
    color: var(--theme-text-card-title, #4A4540);
}

/* Headings inherit color in dark/colored containers */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5, .bg-secondary h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.holler-section-brown h1, .holler-section-brown h2, .holler-section-brown h3, .holler-section-brown h4, .holler-section-brown h5, .holler-section-brown h6,
.holler-section-dark h1, .holler-section-dark h2, .holler-section-dark h3, .holler-section-dark h4, .holler-section-dark h5, .holler-section-dark h6,
.holler-card-dark h1, .holler-card-dark h2, .holler-card-dark h3, .holler-card-dark h4, .holler-card-dark h5, .holler-card-dark h6 {
    color: inherit;
}

/* Links */
a {
    color: var(--theme-link, #6B4423);
    text-decoration: none;
}

a:hover {
    color: var(--theme-link-hover, #8B5A2B);
}

/* ==========================================================================
   FONT AWESOME ICON FIX
   The Replit dark theme overrides <i> elements with body font and weight 400,
   which breaks Font Awesome icons (they require weight 900 for solid icons).
   This restores the correct font-family and weight.
   ========================================================================== */
.fa-solid, .fas, .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.fa-regular, .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Text utilities */
.text-muted {
    color: var(--theme-text-secondary, #6B6560) !important;
}

.text-primary {
    color: var(--theme-primary, #6B4423) !important;
}

.text-secondary {
    color: var(--theme-secondary, #5C7050) !important;
}

.text-success {
    color: var(--theme-success, #2E7D32) !important;
}

.text-warning {
    color: var(--theme-warning, #F57C00) !important;
}

.text-danger {
    color: var(--theme-danger, #C62828) !important;
}

.text-info {
    color: var(--theme-info, #1565C0) !important;
}

/* Theme-specific text utilities for explicit contrast control */
.text-light, .text-white {
    color: var(--theme-text-light, #F5F0E6) !important;
}

.text-dark {
    color: var(--theme-text-dark, #2d2a26) !important;
}

/* Text on specific backgrounds */
.text-on-dark {
    color: var(--theme-text-light, #F5F0E6) !important;
}

.text-on-light {
    color: var(--theme-text-primary, #4A4540) !important;
}

/* Icon colors */
.icon-primary {
    color: var(--theme-primary, #6B4423) !important;
}

.icon-secondary {
    color: var(--theme-secondary, #5C7050) !important;
}

.icon-accent {
    color: var(--theme-accent, #8B2500) !important;
}

.icon-muted {
    color: var(--theme-text-secondary, #6B6560) !important;
}

.icon-success {
    color: var(--theme-success, #2E7D32) !important;
}

.icon-warning {
    color: var(--theme-warning, #F57C00) !important;
}

.icon-danger {
    color: var(--theme-danger, #C62828) !important;
}

.icon-info {
    color: var(--theme-info, #1565C0) !important;
}

/* Icon on dark backgrounds */
.icon-light, .icon-on-dark {
    color: var(--theme-text-light, #F5F0E6) !important;
}

/* ==========================================================================
   LAYOUT CONTAINERS
   ========================================================================== */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    background-color: inherit;
    color: var(--theme-text-primary, #4A4540);
}

/* ==========================================================================
   BACKGROUNDS
   ========================================================================== */

.bg-primary {
    background-color: var(--theme-primary, #6B4423) !important;
    color: var(--theme-text-on-primary, #FFFFFF) !important;
}

.bg-secondary {
    background-color: var(--theme-secondary, #5C7050) !important;
    color: var(--theme-text-on-secondary, #FFFFFF) !important;
}

.bg-success {
    background-color: var(--theme-success, #2E7D32) !important;
    color: white !important;
}

.bg-warning {
    background-color: var(--theme-warning, #F57C00) !important;
    color: white !important;
}

.bg-danger {
    background-color: var(--theme-danger, #C62828) !important;
    color: white !important;
}

.bg-info {
    background-color: var(--theme-info, #1565C0) !important;
    color: white !important;
}

.bg-light {
    background-color: var(--theme-surface-secondary, #F8F9FA) !important;
}

/* Dark background - theme controlled */
.bg-dark {
    background-color: var(--theme-nav-bg, #2D3A2D) !important;
    color: var(--theme-text-light, #F5F0E6) !important;
}

/* Custom theme backgrounds */
.bg-theme-cream, .bg-cream {
    background-color: var(--theme-bg-secondary, #F5F0E6) !important;
}

.bg-theme-surface {
    background-color: var(--theme-surface-primary, #FFFFFF) !important;
}

/* ==========================================================================
   NAVBAR THEMING
   ========================================================================== */

.navbar-dark {
    --bs-navbar-color: var(--theme-nav-text, #F5F0E6);
    --bs-navbar-hover-color: var(--theme-text-light, #FFFFFF);
    --bs-navbar-active-color: var(--theme-text-light, #FFFFFF);
}

.navbar-dark .navbar-brand {
    color: var(--theme-nav-text, #F5F0E6);
}

.navbar-dark .nav-link {
    color: var(--theme-nav-text, #F5F0E6);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: var(--theme-text-light, #FFFFFF);
}

.navbar-dark .nav-link.active {
    color: var(--theme-text-light, #FFFFFF);
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    background-color: var(--theme-card-bg, #FFFFFF);
    border-color: var(--theme-card-border, #DEE2E6);
    color: var(--theme-text-primary, #4A4540);
}

.card-header {
    background-color: var(--theme-card-header-bg, #F8F9FA);
    border-bottom-color: var(--theme-card-border, #DEE2E6);
    color: var(--theme-text-primary, #4A4540);
}

.card-footer {
    background-color: var(--theme-card-header-bg, #F8F9FA);
    border-top-color: var(--theme-card-border, #DEE2E6);
}

.card-title {
    color: var(--theme-primary, #6B4423);
}

.card-text {
    color: var(--theme-text-primary, #4A4540);
}

/* Custom card variants */
.card-theme {
    background-color: var(--theme-card-bg, #FFFFFF);
    border: 1px solid var(--theme-card-border, #DEE2E6);
    border-radius: 8px;
}

.card-theme .card-header {
    background-color: var(--theme-surface-secondary, #F8F9FA);
    border-bottom: 1px solid var(--theme-card-border, #DEE2E6);
    color: var(--theme-text-primary, #4A4540);
}

/* Dark card variant - for use on colored/dark backgrounds */
.card-dark,
.holler-card-dark {
    background-color: var(--theme-card-dark-bg, #4A4540);
    color: var(--theme-card-dark-text, #F5F0E6);
}

.card-dark h1, .card-dark h2, .card-dark h3, .card-dark h4, .card-dark h5, .card-dark h6,
.holler-card-dark h1, .holler-card-dark h2, .holler-card-dark h3, .holler-card-dark h4, .holler-card-dark h5, .holler-card-dark h6 {
    color: inherit;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
    color: var(--theme-text-primary, #4A4540);
    border-color: var(--theme-table-border, #DEE2E6);
}

.table > thead {
    background-color: var(--theme-table-header-bg, #4A4540);
    color: var(--theme-table-header-text, #FFFFFF);
}

.table > thead th {
    background-color: var(--theme-table-header-bg, #4A4540);
    color: var(--theme-table-header-text, #FFFFFF);
    border-color: var(--theme-table-border, #DEE2E6);
}

.table > tbody > tr > td {
    color: var(--theme-text-primary, #4A4540);
    border-color: var(--theme-table-border, #DEE2E6);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--theme-table-stripe-bg, #F8F9FA);
}

.table-hover > tbody > tr:hover > td {
    background-color: var(--theme-surface-hover, #F1F3F5);
}

/* Custom themed table */
.table-theme thead th {
    background-color: var(--theme-table-header-bg, #4A4540);
    color: var(--theme-table-header-text, #FFFFFF);
}

.table-theme td {
    color: var(--theme-text-primary, #4A4540);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-primary {
    background-color: var(--theme-btn-primary-bg, #5C7050);
    border-color: var(--theme-btn-primary-bg, #5C7050);
    color: var(--theme-btn-primary-text, #FFFFFF);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--theme-secondary-dark, #5C7050);
    border-color: var(--theme-secondary-dark, #5C7050);
    color: var(--theme-btn-primary-text, #FFFFFF);
}

.btn-secondary {
    background-color: var(--theme-btn-secondary-bg, #6B4423);
    border-color: var(--theme-btn-secondary-bg, #6B4423);
    color: var(--theme-btn-secondary-text, #FFFFFF);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--theme-primary-light, #8B5A2B);
    border-color: var(--theme-primary-light, #8B5A2B);
    color: var(--theme-btn-secondary-text, #FFFFFF);
}

.btn-success {
    background-color: var(--theme-success, #2E7D32);
    border-color: var(--theme-success, #2E7D32);
    color: white;
}

.btn-danger {
    background-color: var(--theme-danger, #C62828);
    border-color: var(--theme-danger, #C62828);
    color: white;
}

.btn-warning {
    background-color: var(--theme-warning, #F57C00);
    border-color: var(--theme-warning, #F57C00);
    color: white;
}

.btn-info {
    background-color: var(--theme-info, #1565C0);
    border-color: var(--theme-info, #1565C0);
    color: white;
}

.btn-outline-primary {
    color: var(--theme-primary, #6B4423);
    border-color: var(--theme-primary, #6B4423);
}

.btn-outline-primary:hover {
    background-color: var(--theme-primary, #6B4423);
    color: var(--theme-text-on-primary, #FFFFFF);
}

.btn-outline-secondary {
    color: var(--theme-secondary, #5C7050);
    border-color: var(--theme-secondary, #5C7050);
}

.btn-outline-secondary:hover {
    background-color: var(--theme-secondary, #5C7050);
    color: white;
}

.btn-outline-success {
    color: var(--theme-success, #2E7D32);
    border-color: var(--theme-success, #2E7D32);
}

.btn-outline-success:hover {
    background-color: var(--theme-success, #2E7D32);
    color: white;
}

/* Custom theme buttons */
.btn-theme-primary {
    background-color: var(--theme-btn-primary-bg, #5C7050);
    color: var(--theme-btn-primary-text, #FFFFFF);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.btn-theme-primary:hover {
    background-color: var(--theme-secondary-dark, #5C7050);
    color: var(--theme-btn-primary-text, #FFFFFF);
}

.btn-theme-secondary {
    background-color: var(--theme-btn-secondary-bg, #6B4423);
    color: var(--theme-btn-secondary-text, #FFFFFF);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.btn-theme-secondary:hover {
    background-color: var(--theme-primary-light, #8B5A2B);
    color: var(--theme-btn-secondary-text, #FFFFFF);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-control {
    background-color: var(--theme-input-bg, #FFFFFF);
    border-color: var(--theme-input-border, #CED4DA);
    color: var(--theme-text-primary, #4A4540);
}

.form-control:focus {
    border-color: var(--theme-input-focus-border, #5C7050);
    box-shadow: 0 0 0 0.2rem rgba(124, 144, 112, 0.25);
}

.form-control::placeholder {
    color: var(--theme-input-placeholder, #9B9590);
}

.form-select {
    background-color: var(--theme-input-bg, #FFFFFF);
    border-color: var(--theme-input-border, #CED4DA);
    color: var(--theme-text-primary, #4A4540);
}

.form-select:focus {
    border-color: var(--theme-input-focus-border, #5C7050);
    box-shadow: 0 0 0 0.2rem rgba(124, 144, 112, 0.25);
}

.form-label {
    color: var(--theme-text-primary, #4A4540);
}

.form-text {
    color: var(--theme-text-secondary, #6B6560);
}

.input-group-text {
    background-color: var(--theme-surface-secondary, #F8F9FA);
    border-color: var(--theme-input-border, #CED4DA);
    color: var(--theme-text-primary, #4A4540);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert-success {
    background-color: var(--theme-success-light, #E8F5E9);
    border-color: var(--theme-success, #2E7D32);
    color: var(--theme-success, #2E7D32);
}

.alert-warning {
    background-color: var(--theme-warning-light, #FFF3E0);
    border-color: var(--theme-warning, #F57C00);
    color: var(--theme-warning, #F57C00);
}

.alert-danger {
    background-color: var(--theme-danger-light, #FFEBEE);
    border-color: var(--theme-danger, #C62828);
    color: var(--theme-danger, #C62828);
}

.alert-info {
    background-color: var(--theme-info-light, #E3F2FD);
    border-color: var(--theme-info, #1565C0);
    color: var(--theme-info, #1565C0);
}

.alert-primary {
    background-color: var(--theme-primary-light-bg, rgba(107, 68, 35, 0.1));
    border-color: var(--theme-primary, #6B4423);
    color: var(--theme-primary-dark, #4A2F17);
}

.alert-secondary {
    background-color: var(--theme-secondary-light-bg, rgba(92, 112, 80, 0.1));
    border-color: var(--theme-secondary, #5C7050);
    color: var(--theme-secondary-dark, #4A5A40);
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge.bg-primary {
    background-color: var(--theme-badge-primary-bg, #5C7050) !important;
    color: white !important;
}

.badge.bg-secondary {
    background-color: var(--theme-badge-secondary-bg, #6B4423) !important;
    color: white !important;
}

.badge.bg-success {
    background-color: var(--theme-success, #2E7D32) !important;
    color: white !important;
}

.badge.bg-danger {
    background-color: var(--theme-danger, #C62828) !important;
    color: white !important;
}

.badge.bg-warning {
    background-color: var(--theme-warning, #F57C00) !important;
    color: white !important;
}

.badge.bg-info {
    background-color: var(--theme-info, #1565C0) !important;
    color: white !important;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.navbar {
    background-color: var(--theme-nav-bg, #2D3A2D) !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--theme-nav-text, #F5F0E6);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--theme-nav-active, #5C7050);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: var(--theme-nav-active, #5C7050);
}

.navbar-dark .navbar-brand {
    color: var(--theme-nav-text, #F5F0E6);
}

.navbar-dark .navbar-toggler {
    border-color: var(--theme-nav-text, #F5F0E6);
}

.dropdown-menu {
    background-color: var(--theme-card-bg, #FFFFFF);
    border-color: var(--theme-card-border, #DEE2E6);
}

.dropdown-item,
.dropdown-menu a,
.dropdown-menu .dropdown-item {
    color: var(--theme-text-primary, #4A4540) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background-color: var(--theme-surface-hover, #F1F3F5);
    color: var(--theme-primary, #6B4423) !important;
}

.dropdown-divider {
    border-color: var(--theme-border, #DEE2E6);
}

/* Dropdown section headers */
.dropdown-menu h6,
.dropdown-menu .dropdown-header {
    color: var(--theme-text-secondary, #6B6560) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer, .site-footer, .footer {
    background-color: var(--theme-footer-bg, #2D3A2D) !important;
    color: var(--theme-footer-text, #F5F0E6) !important;
}

footer a, .site-footer a, .footer a {
    color: var(--theme-footer-text, #F5F0E6) !important;
}

footer a:hover, .site-footer a:hover, .footer a:hover {
    color: var(--theme-nav-active, #8FBC8F) !important;
}

/* Override text-muted inside footer for proper contrast on dark background */
footer .text-muted, 
.site-footer .text-muted, 
.footer .text-muted {
    color: rgba(245, 240, 230, 0.85) !important;
}

/* Footer headings */
footer h5, .site-footer h5, .footer h5,
footer h6, .site-footer h6, .footer h6 {
    color: var(--theme-footer-text, #F5F0E6) !important;
}

/* Footer horizontal rule */
footer hr, .site-footer hr, .footer hr {
    border-color: rgba(245, 240, 230, 0.3) !important;
    opacity: 1;
}

/* Footer list items */
footer li, .site-footer li, .footer li {
    color: var(--theme-footer-text, #F5F0E6);
}

/* Footer small text and copyright */
footer small, .site-footer small, .footer small {
    color: rgba(245, 240, 230, 0.8) !important;
}

/* ==========================================================================
   BORDERS
   ========================================================================== */

.border {
    border-color: var(--theme-border, #DEE2E6) !important;
}

.border-top {
    border-top-color: var(--theme-border, #DEE2E6) !important;
}

.border-bottom {
    border-bottom-color: var(--theme-border, #DEE2E6) !important;
}

.border-start {
    border-left-color: var(--theme-border, #DEE2E6) !important;
}

.border-end {
    border-right-color: var(--theme-border, #DEE2E6) !important;
}

.border-primary {
    border-color: var(--theme-primary, #6B4423) !important;
}

.border-secondary {
    border-color: var(--theme-secondary, #5C7050) !important;
}

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal-content {
    background-color: var(--theme-card-bg, #FFFFFF);
    border-color: var(--theme-card-border, #DEE2E6);
    color: var(--theme-text-primary, #4A4540);
}

.modal-header {
    background-color: var(--theme-card-header-bg, #F8F9FA);
    border-bottom-color: var(--theme-card-border, #DEE2E6);
}

.modal-footer {
    background-color: var(--theme-card-header-bg, #F8F9FA);
    border-top-color: var(--theme-card-border, #DEE2E6);
}

.modal-title {
    color: var(--theme-primary, #6B4423);
}

/* ==========================================================================
   LIST GROUPS
   ========================================================================== */

.list-group-item {
    background-color: var(--theme-card-bg, #FFFFFF);
    border-color: var(--theme-border, #DEE2E6);
    color: var(--theme-text-primary, #4A4540);
}

.list-group-item:hover {
    background-color: var(--theme-surface-hover, #F1F3F5);
}

.list-group-item.active {
    background-color: var(--theme-secondary, #5C7050);
    border-color: var(--theme-secondary, #5C7050);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--theme-surface-hover, #F1F3F5);
    color: var(--theme-text-primary, #4A4540);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.page-link {
    color: var(--theme-link, #6B4423);
    background-color: var(--theme-card-bg, #FFFFFF);
    border-color: var(--theme-border, #DEE2E6);
}

.page-link:hover {
    color: var(--theme-link-hover, #8B5A2B);
    background-color: var(--theme-surface-hover, #F1F3F5);
    border-color: var(--theme-border, #DEE2E6);
}

.page-item.active .page-link {
    background-color: var(--theme-secondary, #5C7050);
    border-color: var(--theme-secondary, #5C7050);
    color: white;
}

.page-item.disabled .page-link {
    background-color: var(--theme-surface-secondary, #F8F9FA);
    border-color: var(--theme-border, #DEE2E6);
    color: var(--theme-text-light, #9B9590);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item a {
    color: var(--theme-link, #6B4423);
}

.breadcrumb-item a:hover {
    color: var(--theme-link-hover, #8B5A2B);
}

.breadcrumb-item.active {
    color: var(--theme-text-secondary, #6B6560);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--theme-text-light, #9B9590);
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */

.progress {
    background-color: var(--theme-surface-secondary, #F8F9FA);
}

.progress-bar {
    background-color: var(--theme-secondary, #5C7050);
}

.progress-bar.bg-success {
    background-color: var(--theme-success, #2E7D32) !important;
}

.progress-bar.bg-danger {
    background-color: var(--theme-danger, #C62828) !important;
}

.progress-bar.bg-warning {
    background-color: var(--theme-warning, #F57C00) !important;
}

.progress-bar.bg-info {
    background-color: var(--theme-info, #1565C0) !important;
}

/* ==========================================================================
   TABS & NAV
   ========================================================================== */

.nav-tabs .nav-link {
    color: var(--theme-text-secondary, #6B6560);
    border-color: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--theme-link, #6B4423);
    border-color: var(--theme-border, #DEE2E6);
}

.nav-tabs .nav-link.active {
    color: var(--theme-primary, #6B4423);
    background-color: var(--theme-card-bg, #FFFFFF);
    border-color: var(--theme-border, #DEE2E6) var(--theme-border, #DEE2E6) var(--theme-card-bg, #FFFFFF);
}

.nav-pills .nav-link {
    color: var(--theme-text-primary, #4A4540);
}

.nav-pills .nav-link:hover {
    background-color: var(--theme-surface-hover, #F1F3F5);
}

.nav-pills .nav-link.active {
    background-color: var(--theme-secondary, #5C7050);
    color: white;
}

/* ==========================================================================
   ACCORDIONS
   ========================================================================== */

.accordion-item {
    background-color: var(--theme-card-bg, #FFFFFF);
    border-color: var(--theme-border, #DEE2E6);
}

.accordion-button {
    background-color: var(--theme-card-bg, #FFFFFF);
    color: var(--theme-text-primary, #4A4540);
}

.accordion-button:not(.collapsed) {
    background-color: var(--theme-surface-secondary, #F8F9FA);
    color: var(--theme-primary, #6B4423);
}

.accordion-button:focus {
    border-color: var(--theme-input-focus-border, #5C7050);
    box-shadow: 0 0 0 0.2rem rgba(124, 144, 112, 0.25);
}

.accordion-body {
    background-color: var(--theme-card-bg, #FFFFFF);
    color: var(--theme-text-primary, #4A4540);
}

/* ==========================================================================
   TOASTS
   ========================================================================== */

.toast {
    background-color: var(--theme-card-bg, #FFFFFF);
    border-color: var(--theme-border, #DEE2E6);
    color: var(--theme-text-primary, #4A4540);
}

.toast-header {
    background-color: var(--theme-card-header-bg, #F8F9FA);
    border-bottom-color: var(--theme-border, #DEE2E6);
    color: var(--theme-text-primary, #4A4540);
}

/* ==========================================================================
   SPINNERS
   ========================================================================== */

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--theme-primary, #6B4423) !important;
}

.spinner-border.text-secondary,
.spinner-grow.text-secondary {
    color: var(--theme-secondary, #5C7050) !important;
}

/* ==========================================================================
   CUSTOM PAGE HEADERS
   ========================================================================== */

.page-header, .hero-header {
    background: linear-gradient(135deg, var(--theme-nav-bg, #2D3A2D) 0%, #3d4a3d 100%);
    color: var(--theme-nav-text, #F5F0E6);
}

.page-header h1, .page-header h2, .hero-header h1, .hero-header h2 {
    color: var(--theme-nav-text, #F5F0E6);
}

.page-header p, .hero-header p {
    color: rgba(245, 240, 230, 0.9);
}

.page-header a, .hero-header a {
    color: var(--theme-nav-text, #F5F0E6);
}

/* ==========================================================================
   CUSTOM INFO/WARNING BOXES
   ========================================================================== */

.info-box {
    background-color: var(--theme-info-light, #E3F2FD);
    border-left: 4px solid var(--theme-info, #1565C0);
    color: var(--theme-text-primary, #4A4540);
    padding: 1rem;
    border-radius: 0 4px 4px 0;
}

.warning-box {
    background-color: var(--theme-warning-light, #FFF3E0);
    border-left: 4px solid var(--theme-warning, #F57C00);
    color: var(--theme-text-primary, #4A4540);
    padding: 1rem;
    border-radius: 0 4px 4px 0;
}

.success-box {
    background-color: var(--theme-success-light, #E8F5E9);
    border-left: 4px solid var(--theme-success, #2E7D32);
    color: var(--theme-text-primary, #4A4540);
    padding: 1rem;
    border-radius: 0 4px 4px 0;
}

.danger-box {
    background-color: var(--theme-danger-light, #FFEBEE);
    border-left: 4px solid var(--theme-danger, #C62828);
    color: var(--theme-text-primary, #4A4540);
    padding: 1rem;
    border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   HOLLER ICON COMPONENTS
   Reusable icon circles with explicit background and icon colors
   ========================================================================== */

.holler-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.holler-icon-sage {
    background: var(--theme-secondary, #5C7050);
    color: white;
}

.holler-icon-brown {
    background: var(--theme-primary, #6B4423);
    color: var(--theme-bg-secondary, #F5F0E6);
}

.holler-icon-red {
    background: var(--theme-accent, #8B2500);
    color: var(--theme-bg-secondary, #F5F0E6);
}

.holler-icon-success {
    background: var(--theme-success, #2E7D32);
    color: white;
}

.holler-icon-warning {
    background: var(--theme-warning, #F57C00);
    color: white;
}

.holler-icon-info {
    background: var(--theme-info, #1565C0);
    color: white;
}

.holler-icon-danger {
    background: var(--theme-danger, #C62828);
    color: white;
}

/* Light background variants with colored icons */
.holler-icon-success-light {
    background: rgba(46, 125, 50, 0.1);
    color: var(--theme-success, #2E7D32);
}

.holler-icon-primary-light {
    background: rgba(107, 68, 35, 0.1);
    color: var(--theme-primary, #6B4423);
}

.holler-icon-warning-light {
    background: rgba(245, 124, 0, 0.1);
    color: var(--theme-warning, #F57C00);
}

.holler-icon-info-light {
    background: rgba(21, 101, 192, 0.1);
    color: var(--theme-info, #1565C0);
}

.holler-icon-secondary-light {
    background: rgba(124, 144, 112, 0.1);
    color: var(--theme-secondary, #5C7050);
}

.holler-icon-danger-light {
    background: rgba(198, 40, 40, 0.1);
    color: var(--theme-danger, #C62828);
}

/* ==========================================================================
   LEGACY VARIABLE SUPPORT
   ========================================================================== */

/* Map old holler- variables to theme- variables for backward compatibility */
:root {
    /* Holler color aliases - reference theme variables */
    --holler-brown: var(--theme-primary, #6B4423);
    --holler-brown-light: var(--theme-primary-light, #8B5A2B);
    --holler-brown-dark: var(--theme-primary-dark, #5a3a1d);
    --holler-sage: var(--theme-secondary, #5C7050);
    --holler-sage-dark: var(--theme-secondary-dark, #6a7d60);
    --holler-cream: var(--theme-bg-secondary, #F5F0E6);
    --holler-barn-red: var(--theme-accent, #8B2500);
    --holler-warm-gray: var(--theme-neutral-dark, #4A4540);
    --holler-warm-gray-dark: var(--theme-text-dark, #2d2a26);
    
    /* Dark variants for gradients (can be customized in Theme Manager) */
    --theme-primary-dark: #5a3a1d;
    --theme-secondary-dark: #6a7d60;
    --theme-text-dark: #2d2a26;
}

/* ==========================================================================
   CALENDAR & HARVEST PLANNING VARIABLES
   ========================================================================== */

:root {
    /* Borders */
    --theme-border-light: var(--theme-border, #dee2e6);
    --theme-border-lighter: #eee;
    --theme-border-lightest: #f0f0f0;
    
    /* Crop Type Colors */
    --theme-crop-vegetable: #4CAF50;
    --theme-crop-vegetable-dark: #388E3C;
    --theme-crop-herb: #9C27B0;
    --theme-crop-fruit: #FF9800;
    --theme-crop-fruit-dark: #F57C00;
    --theme-crop-shrub: #2196F3;
    --theme-crop-shrub-dark: #1976D2;
    --theme-crop-tree: #795548;
    --theme-crop-annual: #E91E63;
    
    /* Timeline Bar Colors */
    --theme-bar-seed: #8BC34A;
    --theme-bar-seed-dark: #689F38;
    --theme-bar-grow: #4CAF50;
    --theme-bar-grow-dark: #388E3C;
    --theme-bar-harvest: #FF9800;
    --theme-bar-harvest-dark: #F57C00;
    --theme-bar-direct-sow: #2196F3;
    --theme-bar-direct-sow-dark: #1976D2;
    
    /* Frost Zone Colors */
    --theme-frost-overlay: rgba(255, 255, 255, 0.7);
    --theme-frost-border: rgba(200, 220, 240, 0.8);
    --theme-frost-deep: rgba(255, 255, 255, 0.85);
    --theme-frost-deep-mid: rgba(230, 240, 250, 0.75);
    --theme-frost-possible: rgba(200, 220, 240, 0.3);
    --theme-frost-marker: var(--theme-danger, #dc3545);
    --theme-safe-zone: rgba(40, 167, 69, 0.1);
    
    /* Weather Outlook Colors - 14-day forecast cards */
    --theme-weather-card-bg: var(--theme-bg-secondary, #F5F0E6);
    --theme-weather-card-text: var(--theme-text-primary, #4A4540);
    --theme-weather-card-text-muted: var(--theme-text-secondary, #6B6560);
    --theme-weather-frost-bg: #fde8e8;
    --theme-weather-frost-border: var(--theme-danger, #dc3545);
    --theme-weather-frost-text: #7f1d1d;
    --theme-weather-frost-text-muted: #991b1b;
    --theme-weather-rain-bg: #e0f2fe;
    --theme-weather-rain-border: var(--theme-info, #1565C0);
    --theme-weather-rain-text: #0c4a6e;
    
    /* Task/Status Colors */
    --theme-overdue: var(--theme-danger, #dc3545);
    --theme-info-bg: rgba(23, 162, 184, 0.1);
    --theme-info-text: #17a2b8;
    --theme-warning-bg: rgba(255, 193, 7, 0.1);
    --theme-warning-text: #856404;
    
    /* Surface Colors */
    --theme-surface-light: #f8f9fa;
}

/* ==========================================================================
   SEMANTIC SURFACE CLASSES
   These classes bundle background + text colors together to guarantee 
   WCAG AA compliant contrast. Use these instead of setting text and 
   background colors separately to avoid contrast issues.
   ========================================================================== */

/* LIGHT SURFACES - Light backgrounds with dark text */
.surface-light {
    background-color: var(--theme-bg-primary, #FFFFFF) !important;
    color: var(--theme-text-primary, #4A4540) !important;
}

.surface-light h1, .surface-light h2, .surface-light h3, 
.surface-light h4, .surface-light h5, .surface-light h6 {
    color: var(--theme-text-heading, #6B4423);
}

.surface-light a:not(.btn) {
    color: var(--theme-link, #6B4423);
}

.surface-light .text-muted {
    color: var(--theme-text-secondary, #6B6560) !important;
}

/* Cream/secondary light surface */
.surface-cream {
    background-color: var(--theme-bg-secondary, #F5F0E6) !important;
    color: var(--theme-text-primary, #4A4540) !important;
}

.surface-cream h1, .surface-cream h2, .surface-cream h3, 
.surface-cream h4, .surface-cream h5, .surface-cream h6 {
    color: var(--theme-text-heading, #6B4423);
}

.surface-cream a:not(.btn) {
    color: var(--theme-link, #6B4423);
}

/* Card surface */
.surface-card {
    background-color: var(--theme-card-bg, #FFFFFF) !important;
    color: var(--theme-text-primary, #4A4540) !important;
    border: 1px solid var(--theme-card-border, #DEE2E6);
}

.surface-card h1, .surface-card h2, .surface-card h3, 
.surface-card h4, .surface-card h5, .surface-card h6 {
    color: var(--theme-text-card-title, #4A4540);
}

/* DARK SURFACES - Dark backgrounds with light text */
.surface-dark {
    background-color: var(--theme-nav-bg, #2D3A2D) !important;
    color: var(--theme-nav-text, #F5F0E6) !important;
}

.surface-dark h1, .surface-dark h2, .surface-dark h3, 
.surface-dark h4, .surface-dark h5, .surface-dark h6 {
    color: var(--theme-nav-text, #F5F0E6) !important;
}

.surface-dark a:not(.btn) {
    color: var(--theme-nav-text, #F5F0E6);
}

.surface-dark a:not(.btn):hover {
    color: #FFFFFF;
}

.surface-dark .text-muted {
    color: rgba(245, 240, 230, 0.7) !important;
}

/* PRIMARY SURFACE - Primary color background with appropriate contrast text */
.surface-primary {
    background-color: var(--theme-primary, #6B4423) !important;
    color: var(--theme-text-on-primary, #FFFFFF) !important;
}

.surface-primary h1, .surface-primary h2, .surface-primary h3, 
.surface-primary h4, .surface-primary h5, .surface-primary h6 {
    color: var(--theme-text-on-primary, #FFFFFF) !important;
}

.surface-primary a:not(.btn) {
    color: var(--theme-text-on-primary, #FFFFFF);
    text-decoration: underline;
}

/* SECONDARY SURFACE - Secondary color background with appropriate contrast text */
.surface-secondary {
    background-color: var(--theme-secondary, #5C7050) !important;
    color: var(--theme-text-on-secondary, #FFFFFF) !important;
}

.surface-secondary h1, .surface-secondary h2, .surface-secondary h3, 
.surface-secondary h4, .surface-secondary h5, .surface-secondary h6 {
    color: var(--theme-text-on-secondary, #FFFFFF) !important;
}

.surface-secondary a:not(.btn) {
    color: var(--theme-text-on-secondary, #FFFFFF);
    text-decoration: underline;
}

/* ACCENT SURFACE - Accent color background */
.surface-accent {
    background-color: var(--theme-accent, #8B2500) !important;
    color: #FFFFFF !important;
}

.surface-accent h1, .surface-accent h2, .surface-accent h3, 
.surface-accent h4, .surface-accent h5, .surface-accent h6 {
    color: #FFFFFF !important;
}

/* STATUS SURFACES - Semantic color surfaces with guaranteed contrast */
.surface-success {
    background-color: var(--theme-success-light, #E8F5E9) !important;
    color: var(--theme-success, #2E7D32) !important;
}

.surface-success h1, .surface-success h2, .surface-success h3, 
.surface-success h4, .surface-success h5, .surface-success h6 {
    color: var(--theme-success, #2E7D32) !important;
}

.surface-warning {
    background-color: var(--theme-warning-light, #FFF3E0) !important;
    color: var(--theme-warning, #F57C00) !important;
}

.surface-warning h1, .surface-warning h2, .surface-warning h3, 
.surface-warning h4, .surface-warning h5, .surface-warning h6 {
    color: var(--theme-warning, #F57C00) !important;
}

.surface-danger {
    background-color: var(--theme-danger-light, #FFEBEE) !important;
    color: var(--theme-danger, #C62828) !important;
}

.surface-danger h1, .surface-danger h2, .surface-danger h3, 
.surface-danger h4, .surface-danger h5, .surface-danger h6 {
    color: var(--theme-danger, #C62828) !important;
}

.surface-info {
    background-color: var(--theme-info-light, #E3F2FD) !important;
    color: var(--theme-info, #1565C0) !important;
}

.surface-info h1, .surface-info h2, .surface-info h3, 
.surface-info h4, .surface-info h5, .surface-info h6 {
    color: var(--theme-info, #1565C0) !important;
}

/* ==========================================================================
   WEATHER OUTLOOK SURFACES - 14-day forecast cards with proper contrast
   ========================================================================== */

/* Normal weather day card */
.weather-day-card {
    background-color: var(--theme-weather-card-bg, #F5F0E6) !important;
    color: var(--theme-weather-card-text, #4A4540) !important;
}

.weather-day-card .text-muted,
.weather-day-card .weather-day-label {
    color: var(--theme-weather-card-text-muted, #6B6560) !important;
}

/* Frost risk day card - red tones with dark red text for contrast */
.weather-day-frost {
    background-color: var(--theme-weather-frost-bg, #fde8e8) !important;
    color: var(--theme-weather-frost-text, #7f1d1d) !important;
    border: 1px solid var(--theme-weather-frost-border, #dc3545) !important;
}

.weather-day-frost .text-muted,
.weather-day-frost .weather-day-label {
    color: var(--theme-weather-frost-text-muted, #991b1b) !important;
}

.weather-day-frost .weather-icon {
    color: var(--theme-danger, #dc3545) !important;
}

/* Rain/precipitation day card - blue tones */
.weather-day-rain {
    background-color: var(--theme-weather-rain-bg, #e0f2fe) !important;
    color: var(--theme-weather-rain-text, #0c4a6e) !important;
    border: 1px solid var(--theme-weather-rain-border, #1565C0) !important;
}

.weather-day-rain .text-muted,
.weather-day-rain .weather-day-label {
    color: var(--theme-weather-rain-text, #0c4a6e) !important;
    opacity: 0.8;
}

/* HERO & FEATURE SECTIONS - Dark overlay surfaces for hero areas */
.surface-hero {
    background-color: var(--theme-nav-bg, #2D3A2D) !important;
    color: var(--theme-nav-text, #F5F0E6) !important;
}

.surface-hero h1, .surface-hero h2, .surface-hero h3, 
.surface-hero h4, .surface-hero h5, .surface-hero h6 {
    color: var(--theme-nav-text, #F5F0E6) !important;
}

.surface-hero .text-muted, .surface-hero small {
    color: rgba(245, 240, 230, 0.8) !important;
}

.surface-hero p, .surface-hero .lead {
    color: var(--theme-nav-text, #F5F0E6) !important;
}

.surface-hero a:not(.btn) {
    color: var(--theme-nav-text, #F5F0E6);
}

.surface-hero a:not(.btn):hover {
    color: #FFFFFF;
}

/* GRADIENT OVERLAYS - For use on top of images */
.surface-gradient-dark {
    background: linear-gradient(135deg, rgba(45, 58, 45, 0.95), rgba(45, 58, 45, 0.85)) !important;
    color: var(--theme-nav-text, #F5F0E6) !important;
}

.surface-gradient-dark h1, .surface-gradient-dark h2, .surface-gradient-dark h3, 
.surface-gradient-dark h4, .surface-gradient-dark h5, .surface-gradient-dark h6 {
    color: var(--theme-nav-text, #F5F0E6) !important;
}

.surface-gradient-primary {
    background: linear-gradient(135deg, var(--theme-primary, #6B4423), var(--theme-primary-dark, #4A2F17)) !important;
    color: var(--theme-text-on-primary, #FFFFFF) !important;
}

.surface-gradient-primary h1, .surface-gradient-primary h2, .surface-gradient-primary h3, 
.surface-gradient-primary h4, .surface-gradient-primary h5, .surface-gradient-primary h6 {
    color: var(--theme-text-on-primary, #FFFFFF) !important;
}

/* TABLE HEADER SURFACE */
.surface-table-header {
    background-color: var(--theme-table-header-bg, #4A4540) !important;
    color: var(--theme-table-header-text, #FFFFFF) !important;
}

/* CARD HEADER SURFACE */
.surface-card-header {
    background-color: var(--theme-card-header-bg, #F8F9FA) !important;
    color: var(--theme-text-primary, #4A4540) !important;
    border-bottom: 1px solid var(--theme-card-border, #DEE2E6);
}

/* FOOTER SURFACE */
.surface-footer {
    background-color: var(--theme-footer-bg, #2D3A2D) !important;
    color: var(--theme-footer-text, #F5F0E6) !important;
}

.surface-footer a:not(.btn) {
    color: var(--theme-footer-text, #F5F0E6);
}

.surface-footer a:not(.btn):hover {
    color: #FFFFFF;
}

/* NAV SURFACE */
.surface-nav {
    background-color: var(--theme-nav-bg, #2D3A2D) !important;
    color: var(--theme-nav-text, #F5F0E6) !important;
}

.surface-nav a:not(.btn) {
    color: var(--theme-nav-text, #F5F0E6);
}

.surface-nav a:not(.btn):hover {
    color: #FFFFFF;
}