/* Base theme variables */
/* Custom theme mode: When no [data-theme] attribute is present, admin-defined colors are used */
:root {
  /* Light theme colors (default) */
  --bw-bg-primary: #ffffff;
  --bw-bg-secondary: #f8fafc;
  --bw-bg-tertiary: #f1f5f9;
  --bw-bg-card: #ffffff;
  --bw-bg-header: #ffffff;
  --bw-bg-footer: #0f172a;
  
  --bw-text-primary: #0f172a;
  --bw-text-secondary: #64748b;
  --bw-text-tertiary: #94a3b8;
  --bw-text-card: #0f172a;
  --bw-text-header: #0f172a;
  --bw-text-footer: #f1f5f9;
  
  --bw-border-primary: #e2e8f0;
  --bw-border-secondary: #cbd5e1;
  
  --bw-accent-primary: #09b6d4;
  --bw-accent-secondary: #09b6d4;
  
  --bw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --bw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  
  /* Transition for theme switching */
  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}



/* Ensure admin-defined colors are always applied in custom mode */
/* Apply both background and text colors in custom mode */
html:not([data-theme]) .theme-aware-card {
  background-color: var(--card-bg, var(--bw-bg-card)) !important;
  color: var(--card-text, var(--bw-text-card)) !important;
}

html:not([data-theme]) .theme-aware-section {
  background-color: var(--section-bg, var(--bw-bg-primary)) !important;
  color: var(--section-text, var(--bw-text-primary)) !important;
}

html:not([data-theme]) .theme-aware-header {
  background-color: var(--header-bg, var(--bw-bg-header)) !important;
  color: var(--header-text, var(--bw-text-header)) !important;
}



/* Dark theme colors */
[data-theme="dark"] {
  --bw-bg-primary: #0f172a;
  --bw-bg-secondary: #1e293b;
  --bw-bg-tertiary: #334155;
  --bw-bg-card: #1e293b;
  --bw-bg-header: #0f172a;
  --bw-bg-footer: #0f172a;
  
  --bw-text-primary: #f1f5f9;
  --bw-text-secondary: #cbd5e1;
  --bw-text-tertiary: #94a3b8;
  --bw-text-card: #f1f5f9;
  --bw-text-header: #f1f5f9;
  --bw-text-footer: #f1f5f9;
  
  --bw-border-primary: #334155;
  --bw-border-secondary: #475569;
  
  --bw-accent-primary: #09b6d4;
  --bw-accent-secondary: #93c5fd;
  
  --bw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --bw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* Theme-aware utility classes */
.theme-aware-header {
  background-color: var(--bw-bg-header);
  color: var(--bw-text-header);
  border-color: var(--bw-border-primary);
  transition: var(--theme-transition);
}

.theme-aware-section {
  background-color: var(--bw-bg-primary);
  color: var(--bw-text-primary);
  transition: var(--theme-transition);
}

.theme-aware-card {
  background-color: var(--bw-bg-card);
  color: var(--bw-text-card);
  border-color: var(--bw-border-primary);
  transition: var(--theme-transition);
}

/* Force standard light theme colors for cards in light mode */
[data-theme="light"] .theme-aware-card {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .theme-aware-text-secondary {
  color: #64748b !important;
}

[data-theme="dark"] .theme-aware-text-secondary {
  color: #cbd5e1 !important;
}

/* Force standard light theme colors for sections in light mode */
[data-theme="light"] .theme-aware-section {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Force standard light theme colors for headers in light mode */
[data-theme="light"] .theme-aware-header {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Force standard dark theme colors for cards in dark mode */
[data-theme="dark"] .theme-aware-card {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Force standard dark theme colors for sections in dark mode */
[data-theme="dark"] .theme-aware-section {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
}

/* Force standard dark theme colors for headers in dark mode */
[data-theme="dark"] .theme-aware-header {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
}

.theme-aware-text {
  color: var(--bw-text-primary);
  transition: var(--theme-transition);
}

.theme-aware-text-secondary {
  color: var(--bw-text-secondary);
  transition: var(--theme-transition);
}

/* Custom mode: Apply admin-defined text colors only */
/* For section titles, use section text color */
html:not([data-theme]) .theme-aware-section .theme-aware-text {
  color: var(--section-text, var(--bw-text-primary)) !important;
}

/* For card titles, use card text color */
html:not([data-theme]) .theme-aware-card .theme-aware-text {
  color: var(--card-text, var(--bw-text-card)) !important;
}

/* For header titles, use header text color */
html:not([data-theme]) .theme-aware-header .theme-aware-text {
  color: var(--header-text, var(--bw-text-header)) !important;
}

html:not([data-theme]) .theme-aware-text-secondary {
  color: var(--section-text, var(--bw-text-secondary)) !important;
}

html:not([data-theme]) .theme-aware-header {
  color: var(--header-text, var(--bw-text-header)) !important;
}

html:not([data-theme]) .theme-aware-section {
  color: var(--section-text, var(--bw-text-primary)) !important;
}

html:not([data-theme]) .theme-aware-card {
  color: var(--card-text, var(--bw-text-card)) !important;
}

/* Ensure section titles inherit admin-defined colors in custom mode */
html:not([data-theme]) .theme-aware-section h2.theme-aware-text,
html:not([data-theme]) .theme-aware-section .text-center h2.theme-aware-text,
html:not([data-theme]) .theme-aware-section .text-center .theme-aware-text,
html:not([data-theme]) .theme-aware-section .font-extrabold.theme-aware-text,
html:not([data-theme]) .theme-aware-section .font-bold.theme-aware-text {
  color: var(--section-text, var(--bw-text-primary)) !important;
}

.theme-aware-background {
  background-color: var(--bw-bg-primary);
  transition: var(--theme-transition);
}

.theme-aware-border {
  border-color: var(--bw-border-primary);
  transition: var(--theme-transition);
}

/* Button theme variants */
.theme-aware-button {
  background-color: var(--bw-accent-primary);
  color: white;
  border: none;
  transition: var(--theme-transition);
}

.theme-aware-button:hover {
  background-color: var(--bw-accent-secondary);
}

.theme-aware-button-outline {
  background-color: transparent;
  color: var(--bw-accent-primary);
  border: 1px solid var(--bw-accent-primary);
  transition: var(--theme-transition);
}

.theme-aware-button-outline:hover {
  background-color: var(--bw-accent-primary);
  color: white;
}

/* Navigation theme */
.theme-aware-nav {
  background-color: var(--bw-bg-header);
  color: var(--bw-text-header);
  transition: var(--theme-transition);
}

.theme-aware-nav a {
  color: var(--bw-text-header);
  transition: var(--theme-transition);
}

.theme-aware-nav a:hover {
  opacity: 0.8;
}

/* Footer theme */
.theme-aware-footer {
  background-color: var(--bw-bg-footer);
  color: var(--bw-text-footer);
  transition: var(--theme-transition);
}

/* Theme toggle button */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--theme-transition);
  position: relative;
}

.theme-toggle-btn:hover {
  background-color: var(--bw-bg-tertiary);
}

.theme-toggle-btn svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bw-text-primary);
}

/* Custom mode indicator */
.theme-toggle-btn.custom-mode::after {
  content: "A";
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: var(--bw-accent-primary);
  color: white;
  font-size: 0.6rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Ensure proper contrast ratios for accessibility */
[data-theme="dark"] .high-contrast-text {
  color: #ffffff;
}

[data-theme="light"] .high-contrast-text {
  color: #000000;
}

/* Smooth transitions for all theme-aware elements */
.theme-aware-header,
.theme-aware-section,
.theme-aware-card,
.theme-aware-text,
.theme-aware-background {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Grid with dynamic properties */
.section-grid {
  gap: var(--grid-gap, 1.5rem);
  justify-items: var(--justify-items, center);
  align-items: var(--align-items, start);
}

/* Dynamic button color using CSS custom properties */
.dynamic-button-color {
  background-color: var(--bw-accent-primary);
  color: white;
  border: none;
  transition: var(--theme-transition);
}

/* Custom mode: Apply admin-defined button colors */
html:not([data-theme]) .dynamic-button-color {
  background-color: var(--button-bg, var(--bw-accent-primary)) !important;
  color: var(--button-text, white) !important;
}

/* Dark mode: Use standard dark theme button colors */
[data-theme="dark"] .dynamic-button-color {
  background-color: #09b6d4 !important;
  color: white !important;
}

/* Light mode: Use standard light theme button colors */
[data-theme="light"] .dynamic-button-color {
  background-color: #09b6d4 !important;
  color: white !important;
}


/* Theme toggle button icon transition */
#sun-icon, #moon-icon {
  transition: opacity 0.15s ease;
}

/* Custom icon colors */
#moon-icon {
  color: #000000; /* Black moon */
  fill: #000000; /* Black fill for SVG icons */
}

#sun-icon {
  color: #fbbf24; /* Sun yellow color */
}