/* Central Theme Configuration for Tshikhuthula Primary School */
/* Based on the red lantern brand identity */

:root {
  /* Primary Brand Colors - Red Lantern Theme */
  --primary: #B91C1C;           /* Deep red - main brand color */
  --secondary: #DC2626;         /* Bright red - secondary actions */
  --accent: #FCD34D;            /* Golden yellow - flame/accent color */
  
  /* Neutral Colors */
  --light: #FEF2F2;             /* Very light red tint */
  --dark: #7F1D1D;              /* Dark red */
  --text-dark: #1F2937;         /* Dark gray for text */
  --text-light: #6B7280;        /* Light gray for secondary text */
  --white: #FFFFFF;
  --black: #000000;
  --overlay-dark: rgba(24, 29, 56, 0.7);  /* Dark overlay for backgrounds */
  --overlay-light: rgba(255, 255, 255, 0.9);  /* Light overlay for backgrounds */
  
  /* Background Colors */
  --bg-primary: var(--primary);
  --bg-secondary: var(--light);
  --bg-accent: var(--accent);
  
  /* Border Colors */
  --border-light: #E5E7EB;
  --border-light-transparent: rgba(255, 255, 255, 0.1);  /* Transparent white border */
  --border-primary: var(--primary);
  
  /* Status Colors */
  --success: #10B981;
  --warning: var(--accent);
  --error: #EF4444;
  --info: #3B82F6;
  
  /* Bootstrap Override Variables */
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-danger: var(--error);
  --bs-info: var(--info);
  --bs-light: var(--light);
  --bs-dark: var(--dark);
  
  /* Typography */
  --font-family-primary: 'Nunito', sans-serif;
  --font-family-secondary: 'Heebo', sans-serif;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}

/* Global Button Styles - All buttons inherit these colors */
.btn {
  font-family: var(--font-family-primary);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

/* All H1 headings */
h1, .h1 {
  color: var(--primary) !important;
  font-weight: 700;
  font-family: var(--font-family-primary);
}

/* All H2 headings */
h2, .h2 {
  color: var(--text-dark) !important;
  font-weight: 600;
  font-family: var(--font-family-primary);
}

/* All H3 headings */
h3, .h3 {
  color: var(--primary) !important;
  font-weight: 600;
  font-family: var(--font-family-primary);
}

/* All H4, H5, H6 headings */
h4, .h4, h5, .h5, h6, .h6 {
  color: var(--text-dark) !important;
  font-weight: 500;
  font-family: var(--font-family-primary);
}

/* Utility Classes */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-accent { color: var(--accent) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-light { color: var(--text-light) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-accent { background-color: var(--accent) !important; }
.bg-light { background-color: var(--light) !important; }
.bg-dark { background-color: var(--dark) !important; }

.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-light { border-color: var(--border-light) !important; }

/* Bootstrap Button Overrides - All buttons use theme colors */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
  color: var(--white) !important;
}

.btn-secondary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--white) !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
  color: var(--white) !important;
}

.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.btn-outline-secondary {
  color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--white) !important;
}

/* Custom button variants */
.btn-accent {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-dark) !important;
}

.btn-accent:hover, .btn-accent:focus, .btn-accent:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

/* Additional Bootstrap utility class overrides */
.border-accent {
  border-color: var(--accent) !important;
}

/* Enhanced Badge Variants */
.badge.bg-secondary {
  background-color: var(--secondary) !important;
  color: var(--white) !important;
}

.badge.bg-accent {
  background-color: var(--accent) !important;
  color: var(--text-dark) !important;
}

/* Smart Text Color System - Context-aware text colors */
/* Default paragraph text - black on light backgrounds */
p {
  color: var(--text-dark) !important;
}

/* White text on dark/brand colored backgrounds */
.bg-primary p,
.bg-secondary p,
.bg-dark p,
.bg-accent p,
.text-bg-primary p,
.text-bg-secondary p,
.text-bg-dark p {
  color: var(--white) !important;
}

/* Card hover states - white text when background changes to brand colors */
.card:hover p,
.card.bg-primary p,
.card.bg-secondary p,
.card.bg-dark p {
  color: var(--white) !important;
}

/* Service/feature boxes with brand backgrounds */
.service-item:hover p,
.feature-item:hover p,
[class*="bg-primary"] p,
[class*="bg-secondary"] p,
[class*="bg-dark"] p {
  color: var(--white) !important;
}

/* Specific sections that should have white text */
.hero-section p,
.cta-section p,
.testimonial-section p {
  color: var(--white) !important;
}

/* Footer specific text styling */
.footer p,
.footer .copyright,
.footer .copyright div {
  color: var(--white) !important;
}

.footer a {
  color: var(--white) !important;
}

.footer a:hover {
  color: var(--primary) !important;
}

/* Pagination Styles */
.pagination .page-link {
  color: var(--primary) !important;
  border-color: var(--border-light) !important;
  background-color: var(--white) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.pagination .page-link:hover {
  background-color: var(--light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.pagination .page-item.disabled .page-link {
  color: var(--text-light) !important;
  background-color: var(--light) !important;
  border-color: var(--border-light) !important;
}

/* Link Styles */
a {
  color: var(--primary);
  transition: var(--transition-fast);
}

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

/* Form Elements */
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.25);
}

/* Badge Variants */
.badge.bg-primary {
  background-color: var(--primary) !important;
}

.badge.bg-warning {
  background-color: var(--accent) !important;
  color: var(--text-dark) !important;
}

/* Alert Variants */
.alert-primary {
  background-color: var(--light);
  border-color: var(--primary);
  color: var(--dark);
}

/* Navigation */
.navbar-brand {
  color: var(--primary) !important;
}

.nav-link {
  color: var(--text-dark) !important;
  transition: var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.nav-link.active {
  color: var(--primary) !important;
  background-color: transparent !important;
}

/* Dropdown Menu Styling */
.dropdown-menu {
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-md) !important;
}

.dropdown-item {
  color: var(--text-dark) !important;
  transition: var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
  background-color: var(--light) !important;
  color: var(--primary) !important;
}

/* Remove Bootstrap's default focus outline and add custom styling */
.nav-link:focus,
.dropdown-item:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Navbar toggler styling */
.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.25) !important;
  border-color: var(--primary) !important;
}

/* Cards */
.card {
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Responsive Design Helpers */
@media (prefers-color-scheme: dark) {
  /* Dark mode support can be added here if needed */
}

/* Print Styles */
@media print {
  :root {
    --primary: #000000;
    --secondary: #666666;
    --accent: #000000;
  }
}