/* =============================================
   CBA Aachen — Light / Dark Mode Theme System
   ============================================= */

/* --- CSS Custom Properties --- */

:root {
  /* Dark mode (default) */
  --bg-base:        #0c1525;
  --bg-card:        #111e30;
  --bg-elevated:    #1a2d42;
  --bg-surface:     #243549;
  --bg-accent:      #182d45;
  --border-dim:     #1d3050;
  --border-subtle:  #2e4a68;
  --text-default:   #ffffff;
  --text-muted:     #94a3b8;
  --text-dim:       #475569;
  --nav-bg:         rgba(12, 21, 37, 0.92);
  --community-tile: #111e30;

  /* Brand colors */
  --color-pink:     #E5016A;
  --color-cba-blue: #0057B8;
}

:root.light {
  /* Light mode */
  --bg-base:        #f0f4f8;
  --bg-card:        #ffffff;
  --bg-elevated:    #f1f5f9;
  --bg-surface:     #e2e8f0;
  --bg-accent:      #0f2240;
  --border-dim:     #e2e8f0;
  --border-subtle:  #cbd5e1;
  --text-default:   #0f172a;
  --text-muted:     #475569;
  --text-dim:       #64748b;
  --nav-bg:         rgba(240, 244, 248, 0.95);
  --community-tile: #dbeafe;
}

/* --- Base overrides --- */

body {
  background-color: var(--bg-base) !important;
  color: var(--text-default) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- Background utilities --- */

.bg-bg-base      { background-color: var(--bg-base)     !important; }
.bg-bg-card      { background-color: var(--bg-card)     !important; }
.bg-bg-elevated  { background-color: var(--bg-elevated) !important; }
.bg-bg-surface   { background-color: var(--bg-surface)  !important; }
.bg-bg-accent    { background-color: var(--bg-accent)   !important; }
.bg-pink         { background-color: var(--color-pink)   !important; }
.bg-cba-blue     { background-color: var(--color-cba-blue) !important; }

/* Background hover utilities (light mode overrides) */
:root.light .hover\:bg-bg-base:hover     { background-color: var(--bg-base)     !important; }
:root.light .hover\:bg-bg-card:hover     { background-color: var(--bg-card)     !important; }
:root.light .hover\:bg-bg-elevated:hover { background-color: var(--bg-elevated) !important; }
:root.light .hover\:bg-bg-surface:hover  { background-color: var(--bg-surface)  !important; }

/* --- Border utilities --- */

.border-border-dim    { border-color: var(--border-dim)    !important; }
.border-border-subtle { border-color: var(--border-subtle) !important; }
.divide-border-dim > * + * { border-color: var(--border-dim) !important; }

/* --- Text utilities --- */

/* text-white: in dark mode #fff is correct; remap in light mode */
:root.light .text-white  { color: var(--text-default) !important; }
.text-text-muted          { color: var(--text-muted)   !important; }
.text-text-dim            { color: var(--text-dim)     !important; }
.text-pink                { color: var(--color-pink)   !important; }
.text-cba-blue            { color: var(--color-cba-blue) !important; }

/* Exceptions: SOLID bg-pink/bg-cba-blue keep white text */
:root.light .bg-pink:not(.bg-opacity-5):not(.bg-opacity-10):not(.bg-opacity-15),
:root.light .bg-pink:not(.bg-opacity-5):not(.bg-opacity-10):not(.bg-opacity-15) .text-white,
:root.light .bg-pink:not(.bg-opacity-5):not(.bg-opacity-10):not(.bg-opacity-15) span,
:root.light .bg-cba-blue:not(.bg-opacity-5):not(.bg-opacity-10):not(.bg-opacity-15),
:root.light .bg-cba-blue:not(.bg-opacity-5):not(.bg-opacity-10):not(.bg-opacity-15) .text-white,
:root.light .bg-cba-blue:not(.bg-opacity-5):not(.bg-opacity-10):not(.bg-opacity-15) span,
:root.light .bg-emerald-700, :root.light .bg-emerald-700 .text-white, :root.light .bg-emerald-700 span,
:root.light .bg-violet-600,  :root.light .bg-violet-600 .text-white,  :root.light .bg-violet-600 span {
  color: #ffffff !important;
}

/* Keep brand color contrast in light mode */
:root.light .text-cba-blue { color: #0057B8 !important; }
:root.light .text-pink     { color: #E5016A !important; }

/* --- Navigation --- */

#cba-nav {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--border-dim) !important;
}

:root.light #cba-nav a.text-white { color: #0f172a !important; }

/* --- Community partner tiles --- */

[style*="background:#0E1729"] {
  background-color: var(--community-tile) !important;
}

:root.light [style*="background:#0E1729"] img {
  filter: brightness(0) !important;
}

/* --- Accordion (details/summary) --- */

details,
details[open],
details.bg-bg-card { background-color: var(--bg-card) !important; }

html.light details,
html.light details[open],
html.light details.bg-bg-card { background-color: #ffffff !important; }

html.light details[open] > summary { background-color: #f1f5f9 !important; }

html.light details summary span,
html.light details summary .font-semibold { color: #0f172a !important; }

/* --- Programm tabs: active tab pink tint --- */

:root.light .border-pink.bg-bg-elevated {
  background-color: rgba(229, 1, 106, 0.07) !important;
}

/* --- Hover overrides in light mode --- */

:root.light .hover\:text-white:hover {
  color: var(--text-default) !important;
}

:root.light #cba-nav a:hover {
  color: #0057B8 !important;
}

:root.light a.border-border-dim:hover,
:root.light button.border-border-dim:hover {
  border-color: #0057B8 !important;
  color: #0057B8 !important;
}

/* --- Speaker mystery card "?" --- */

:root.light .bg-bg-elevated .text-6xl {
  color: #0057B8 !important;
}

/* --- Placeholder field --- */

.placeholder-field {
  border-color: var(--border-subtle) !important;
  color: var(--text-dim) !important;
}

/* --- Mobile menu --- */

:root.light #cba-mobile-menu {
  background-color: var(--bg-card) !important;
}

/* --- Footer --- */

footer { border-top-color: var(--border-dim) !important; }

/* --- Force-dark sections (hero with background image) --- */

:root.light .force-dark {
  --bg-base:        #0c1525;
  --bg-card:        #111e30;
  --bg-elevated:    #1a2d42;
  --bg-surface:     #243549;
  --border-dim:     #1d3050;
  --border-subtle:  #2e4a68;
  --text-default:   #ffffff;
  --text-muted:     #94a3b8;
  --text-dim:       #475569;
}

:root.light .force-dark,
:root.light .force-dark h1,
:root.light .force-dark h2,
:root.light .force-dark h3,
:root.light .force-dark p,
:root.light .force-dark span:not(.text-pink):not(.text-cba-blue),
:root.light .force-dark div { color: #ffffff; }

:root.light .force-dark .text-white { color: #ffffff !important; }
:root.light .force-dark .text-text-muted { color: #94a3b8 !important; }
:root.light .force-dark .text-text-dim   { color: #475569 !important; }

/* --- Accent sections in light mode (dark navy bg, white text) --- */

:root.light .bg-bg-accent {
  --bg-base:        #0c1525;
  --bg-card:        #111e30;
  --bg-elevated:    #1a2d42;
  --bg-surface:     #243549;
  --border-dim:     #1d3050;
  --border-subtle:  #2e4a68;
  --text-default:   #ffffff;
  --text-muted:     #94a3b8;
  --text-dim:       #475569;
}

:root.light .bg-bg-accent,
:root.light .bg-bg-accent h2,
:root.light .bg-bg-accent h3,
:root.light .bg-bg-accent p,
:root.light .bg-bg-accent span:not(.text-pink):not(.text-cba-blue),
:root.light .bg-bg-accent div { color: #ffffff; }

:root.light .bg-bg-accent .text-white       { color: #ffffff !important; }
:root.light .bg-bg-accent .text-text-muted  { color: #94a3b8 !important; }
:root.light .bg-bg-accent .text-text-dim    { color: #475569 !important; }
:root.light .bg-bg-accent .hover\:text-white:hover { color: #ffffff !important; }

:root.light .bg-bg-accent a.border-border-dim:hover,
:root.light .bg-bg-accent button.border-border-dim:hover {
  border-color: #E5016A !important;
  color: #E5016A !important;
}

/* --- Transition for smooth theme switch --- */

body,
body * {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

body *[class*="transition"],
body img,
body video,
body svg {
  transition: inherit;
}