@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap');

:root {
  --beach-page: #f8f4e7;
  --beach-sand: #fff7e8;
  --beach-sand-2: #fff1d8;
  --beach-sky: #eaf8ff;
  --beach-water: #dff7f7;
  --beach-leaf: #e8f7df;
  --beach-card: #ffffff;
  --beach-card-alt: #fdfbf4;
  --beach-border: #cfe4df;
  --beach-shadow: 0 8px 22px rgba(79, 142, 138, 0.12);
  --beach-text: #1f4f59;
  --beach-text-soft: #527078;
  --beach-heading: #0f5f6f;
  --beach-accent: #1d8f9f;
  --beach-accent-soft: #f7d978;
  --beach-success: #5fa56d;
}

html,
body,
#root {
  min-height: 100%;
  background: var(--beach-page) !important;
  background-image: none !important;
  color: var(--beach-text) !important;
}

body::before,
body::after,
#root::before,
#root::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

* {
  scrollbar-color: #b7d7d2 #f6f1e2;
}

*, *::before, *::after {
  border-color: var(--beach-border) !important;
}

/* Remove dark and gradient backgrounds everywhere */
[class*='bg-gradient'],
[class*='from-'],
[class*='via-'],
[class*='to-'],
.text-gradient,
.text-gradient-gold,
.section-title,
.border-gradient::before,
.cosmic-bg,
.sidebar-cosmic,
.glass-card,
.btn-glow,
.btn-bloom,
.divider-cosmic,
.glow-dot {
  background-image: none !important;
}

/* Base typography */
body,
button,
input,
textarea,
select {
  font-family: 'Nunito', system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.font-display,
.section-title,
[class*='text-2xl'],
[class*='text-3xl'],
[class*='text-4xl'],
[class*='text-5xl'] {
  font-family: 'Poppins', system-ui, sans-serif !important;
  color: var(--beach-heading) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

p, li, span, label, strong, small, div,
a, td, th,
.text-white,
.text-card-foreground,
.text-muted-foreground,
.scripture-glow,
[class*='text-slate-'],
[class*='text-zinc-'],
[class*='text-neutral-'],
[class*='text-gray-'],
[class*='text-stone-'],
[class*='text-blue-'],
[class*='text-cyan-'] {
  color: var(--beach-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

small,
.text-muted-foreground,
::placeholder {
  color: var(--beach-text-soft) !important;
}

a {
  color: var(--beach-accent) !important;
}

/* Main page surfaces */
main,
header,
nav,
aside,
footer,
.bg-background,
[class*='bg-background'],
[class*='bg-slate-'],
[class*='bg-zinc-'],
[class*='bg-neutral-'],
[class*='bg-gray-'],
[class*='bg-stone-'],
[class*='bg-black'],
[class*='bg-blue-'],
[class*='bg-indigo-'],
[class*='bg-card'],
[class*='bg-popover'],
[class*='bg-muted'] {
  background-color: var(--beach-sand) !important;
  background-image: none !important;
  color: var(--beach-text) !important;
}

header,
nav,
aside,
footer,
header.sticky,
header[class*='backdrop'] {
  background-color: #fffdf7 !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 10px rgba(79, 142, 138, 0.08) !important;
}

/* Cards, modals, panels */
.glass-card,
.game-card,
.prayer-card,
.reading-card,
.stat-card,
.leaderboard-row,
.dialog-content,
.card,
article,
section > div[class*='rounded'],
[role='dialog'],
[role='menu'],
[role='listbox'],
[role='tabpanel'],
[class*='shadow'],
[class*='rounded-'][class*='border'] {
  background: var(--beach-card) !important;
  background-image: none !important;
  color: var(--beach-text) !important;
  border: 1px solid var(--beach-border) !important;
  box-shadow: var(--beach-shadow) !important;
  backdrop-filter: none !important;
}

/* Explicit fix for leaderboard rows that were dark */
.leaderboard-row,
.leaderboard-row.top-1,
.leaderboard-row.top-2,
.leaderboard-row.top-3,
table tr,
[role='tab'],
[data-state],
.accordion-item {
  background: var(--beach-card-alt) !important;
  color: var(--beach-text) !important;
  box-shadow: none !important;
}

/* Buttons */
button,
[role='button'],
a.inline-flex,
a[class*='rounded'],
input[type='button'],
input[type='submit'],
.btn-glow,
.btn-bloom {
  background: #fff3bf !important;
  color: #134d58 !important;
  border: 1px solid #ebd48a !important;
  box-shadow: 0 4px 10px rgba(189, 166, 88, 0.12) !important;
  text-shadow: none !important;
}

button:hover,
[role='button']:hover,
a.inline-flex:hover,
a[class*='rounded']:hover,
input[type='button']:hover,
input[type='submit']:hover {
  background: #ffe89a !important;
  transform: none !important;
  filter: none !important;
}

button:disabled,
input:disabled {
  opacity: 0.7 !important;
}

/* Inputs */
input,
textarea,
select,
.input-cosmic,
.flex-1.px-3.py-2.rounded-lg.border.font-body.text-sm {
  background: #ffffff !important;
  color: var(--beach-text) !important;
  border: 1px solid #bfded8 !important;
  box-shadow: none !important;
}

.input-cosmic::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--beach-text-soft) !important;
}

input:focus,
textarea:focus,
select:focus,
.input-cosmic:focus {
  outline: 2px solid #a9dad2 !important;
  outline-offset: 1px !important;
  border-color: #8bc8bf !important;
  box-shadow: none !important;
}

/* Progress and badges */
progress,
[role='progressbar'],
.progress,
[class*='progress'] {
  background: #edf6f3 !important;
  color: var(--beach-accent) !important;
}

[class*='badge'],
.badge,
.rounded-full {
  color: var(--beach-text) !important;
}

/* More specific utility overrides for likely dark elements */
.bg-blue-600,
.bg-blue-700,
.bg-slate-900,
.bg-slate-800,
.bg-slate-700,
.bg-zinc-900,
.bg-neutral-900,
.bg-gray-900,
.bg-black,
.bg-card,
.bg-muted,
.bg-popover,
.border-gradient,
.sidebar-cosmic,
.cosmic-bg,
.input-cosmic,
[data-sonner-toaster] {
  background: var(--beach-card) !important;
  background-image: none !important;
  color: var(--beach-text) !important;
}

/* Sunny section accents */
.hero-section,
.banner,
[class*='hero'],
[class*='banner'] {
  background: var(--beach-sky) !important;
  background-image: none !important;
}

/* Calm beach color blocks */
[class*='emerald'],
[class*='green-'] {
  color: var(--beach-success) !important;
}

[class*='amber-'],
[class*='yellow-'],
[class*='gold'] {
  color: #9a6d10 !important;
}

/* Tables and separators */
hr,
.divider-cosmic {
  height: 1px !important;
  background: #d7e8e3 !important;
  border: 0 !important;
}

/* Kill glow and fancy effects that reduce readability */
[class*='shadow-2xl'],
[class*='shadow-xl'],
[class*='backdrop-blur'],
[class*='blur-'],
.scripture-glow,
.glow-dot {
  filter: none !important;
  text-shadow: none !important;
}