:root {
  --bg: #faf9f7;
  --bg-alt: #ffffff;
  --text: #1a1f24;
  --card: #ffffff;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: rgba(0,0,0,0.05);
}

html.dark {
  --bg: #0f1419;
  --bg-alt: #1a2332;
  --text: #e6eef2;
  --card: #1a2332;
  --muted: #9aa6b2;
  --border: #2d3f4f;
  --shadow: rgba(0,0,0,0.3);
}

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

html.dark * {
  color-scheme: dark;
}

html * {
  color-scheme: light;
}

/* CORE BODY AND TEXT */
body, html {
  background-color: var(--bg);
  color: var(--text);
}

html.dark body, html.dark html {
  background-color: var(--bg);
  color: var(--text);
}

/* ALL TEXT ELEMENTS - ENSURE VISIBILITY */
h1, h2, h3, h4, h5, h6, p, span, div, a, button, label, li, tr, td, th, 
section, article, header, footer, nav, aside, form, fieldset, legend,
dt, dd, blockquote, ol, ul {
  color: var(--text);
}

html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark p, html.dark span, html.dark div, html.dark a, html.dark button, 
html.dark label, html.dark li, html.dark tr, html.dark td, html.dark th,
html.dark section, html.dark article, html.dark header, html.dark footer, html.dark nav,
html.dark aside, html.dark form, html.dark fieldset, html.dark legend,
html.dark dt, html.dark dd, html.dark blockquote, html.dark ol, html.dark ul {
  color: var(--text);
}

/* SPECIFIC TEXT COLOR UTILITIES */
.text-brand-900, .text-brand-800, .text-brand-700 {
  color: #1a1f24;
}

html.dark .text-brand-900, html.dark .text-brand-800, html.dark .text-brand-700 {
  color: #e6eef2;
}

.text-gray-400, .text-gray-450, .text-gray-475 {
  color: #6b7280;
}

html.dark .text-gray-400, html.dark .text-gray-450, html.dark .text-gray-475 {
  color: #9aa6b2;
}

.text-gray-500 {
  color: #6b7280;
}

html.dark .text-gray-500 {
  color: #9aa6b2;
}

.text-gray-600, .text-gray-650 {
  color: #4b5563;
}

html.dark .text-gray-600, html.dark .text-gray-650 {
  color: #b8c5d6;
}

.text-gray-700 {
  color: #374151;
}

html.dark .text-gray-700 {
  color: #d1dce8;
}

.text-white {
  color: #ffffff;
}

html.dark .text-white {
  color: #ffffff;
}

.text-brand-500, .text-brand-600, .text-brand-400 {
  color: #c29b7a;
}

html.dark .text-brand-500, html.dark .text-brand-600, html.dark .text-brand-400 {
  color: #e6b89d;
}

.text-brand-300 {
  color: #e1d0bc;
}

html.dark .text-brand-300 {
  color: #e6b89d;
}

.text-red-700, .text-red-600 {
  color: #dc2626;
}

html.dark .text-red-700, html.dark .text-red-600 {
  color: #f87171;
}

.text-red-500 {
  color: #ef4444;
}

html.dark .text-red-500 {
  color: #fca5a5;
}

.text-yellow-700, .text-yellow-600 {
  color: #b45309;
}

html.dark .text-yellow-700, html.dark .text-yellow-600 {
  color: #fbbf24;
}

.text-yellow-500 {
  color: #eab308;
}

html.dark .text-yellow-500 {
  color: #facc15;
}

.text-green-600 {
  color: #16a34a;
}

html.dark .text-green-600 {
  color: #86efac;
}

/* CARD AND BACKGROUND ELEMENTS */
.card {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

.muted {
  color: var(--muted);
}

html.dark .muted {
  color: var(--muted);
}

/* All white backgrounds */
.bg-white {
  background-color: var(--card);
}

.bg-\[\#faf9f7\], .bg-\[#faf9f7\] {
  background-color: var(--bg);
}

.bg-\[\#fcfcfc\], .bg-\[#fcfcfc\] {
  background-color: var(--bg-alt);
}

html.dark .bg-white {
  background-color: var(--card);
}

html.dark .bg-\[\#faf9f7\], html.dark .bg-\[#faf9f7\] {
  background-color: var(--bg);
}

html.dark .bg-\[\#fcfcfc\], html.dark .bg-\[#fcfcfc\] {
  background-color: var(--bg-alt);
}

/* Brand backgrounds */
.bg-brand-50 {
  background-color: #fcfaf8;
}

html.dark .bg-brand-50 {
  background-color: rgba(230, 184, 157, 0.08);
}

.bg-brand-100 {
  background-color: #f6f1ec;
}

html.dark .bg-brand-100 {
  background-color: rgba(230, 184, 157, 0.12);
}

.bg-brand-200 {
  background-color: #efe6d8;
}

html.dark .bg-brand-200 {
  background-color: rgba(230, 184, 157, 0.15);
}

.bg-brand-900 {
  background-color: #1a1f24;
  color: #ffffff;
}

html.dark .bg-brand-900 {
  background-color: #2d3f4f;
  color: #e6eef2;
}

.bg-red-50, .bg-red-100 {
  background-color: #fee2e2;
}

html.dark .bg-red-50, html.dark .bg-red-100 {
  background-color: rgba(248, 113, 113, 0.1);
}

.bg-yellow-50 {
  background-color: #fef3c7;
}

html.dark .bg-yellow-50 {
  background-color: rgba(251, 191, 36, 0.1);
}

/* Borders */
.border-brand-100 {
  border-color: var(--border);
}

html.dark .border-brand-100 {
  border-color: var(--border);
}

.border-brand-200 {
  border-color: #efe6d8;
}

html.dark .border-brand-200 {
  border-color: rgba(230, 184, 157, 0.2);
}

.border-red-500 {
  border-color: #ef4444;
}

html.dark .border-red-500 {
  border-color: #f87171;
}

.border-yellow-500 {
  border-color: #eab308;
}

html.dark .border-yellow-500 {
  border-color: #facc15;
}

/* Inputs and forms */
input, textarea, select {
  background-color: var(--card);
  color: var(--text);
  border-color: var(--border);
}

input::placeholder, textarea::placeholder {
  color: var(--muted);
}

html.dark input, html.dark textarea, html.dark select {
  background-color: var(--card);
  color: var(--text);
  border-color: var(--border);
}

html.dark input::placeholder, html.dark textarea::placeholder {
  color: var(--muted);
}

/* Navbar */
.bg-white\/80, .bg-white\/90 {
  background-color: rgba(255, 255, 255, 0.8);
}

html.dark .bg-white\/80, html.dark .bg-white\/90 {
  background-color: rgba(26, 35, 50, 0.8);
}

/* Modal */
.modal {
  background-color: rgba(250, 249, 247, 0.98);
}

html.dark .modal {
  background-color: rgba(15, 20, 25, 0.98);
}

/* Details/Summary */
details, details summary {
  color: var(--text);
}

html.dark details {
  background-color: var(--bg-alt);
  border-color: var(--border);
}

html.dark details summary {
  color: var(--text);
}

html.dark details::marker {
  color: var(--text);
}

/* Theme toggle button */
#theme-toggle {
  font-size: 1.5rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#theme-toggle:hover {
  transform: scale(1.1) rotate(20deg);
}

/* Smooth transitions for dark mode */
body.transitioning * {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PROSE AND RICH TEXT */
.prose, .prose p, .prose span, .prose div {
  color: var(--text);
}

html.dark .prose, html.dark .prose p, html.dark .prose span, html.dark .prose div {
  color: var(--text);
}

/* Links - inherit color but with proper contrast */
a {
  color: inherit;
}

html.dark a {
  color: inherit;
}

/* Shadows in dark mode */
.shadow-premium, .shadow-premium-hover, .shadow-sm, .shadow-md {
  box-shadow: 0 20px 40px -15px var(--shadow);
}

html.dark .shadow-premium, html.dark .shadow-premium-hover, 
html.dark .shadow-sm, html.dark .shadow-md {
  box-shadow: 0 20px 40px -15px var(--shadow);
}