/**
 * Global Theme Styles
 * CSS Variable-based theme system that works with Tailwind CDN
 */

/* CSS Custom Properties for Theme Colors */
:root {
    --bg-primary: #f9fafb; /* gray-50 */
    --bg-secondary: #ffffff; /* white */
    --bg-tertiary: #111827; /* gray-800 */
    --text-primary: #111827; /* gray-900 */
    --text-secondary: #6b7280; /* gray-500 */
    --text-tertiary: #ffffff; /* white */
    --border-color: #e5e7eb; /* gray-200 */
}

html.dark {
    --bg-primary: #111827; /* gray-900 - main background */
    --bg-secondary: #1f2937; /* gray-800 - cards/headers */
    --bg-tertiary: #374151; /* gray-700 - borders/hovers */
    --bg-quaternary: #4b5563; /* gray-600 - lighter elements */
    --text-primary: #ffffff; /* white - main text */
    --text-secondary: #d1d5db; /* gray-300 - secondary text */
    --text-tertiary: #f3f4f6; /* gray-100 - light text */
    --text-quaternary: #9ca3af; /* gray-400 - muted text */
    --border-color: #374151; /* gray-700 */
    --border-light: #4b5563; /* gray-600 - lighter borders */
    color-scheme: dark;
}

html:not(.dark) {
    color-scheme: light;
}

/* Smooth transitions for theme changes */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Override Tailwind classes with CSS variables for dynamic theme switching */
/* Only apply when dark class is present or not present */
html:not(.dark) .bg-gray-50,
html.dark .bg-gray-50 {
    background-color: var(--bg-primary);
}

html:not(.dark) .bg-white,
html.dark .bg-white {
    background-color: var(--bg-secondary);
}

html:not(.dark) .bg-gray-800,
html.dark .bg-gray-800 {
    background-color: var(--bg-secondary);
}

/* In dark mode, make bg-gray-800 lighter (use gray-600 instead) */
html.dark .bg-gray-800 {
    background-color: var(--bg-quaternary) !important;
}

html:not(.dark) .bg-gray-900,
html.dark .bg-gray-900 {
    background-color: var(--bg-primary);
}

html:not(.dark) .text-gray-900,
html.dark .text-gray-900 {
    color: var(--text-primary);
}

html:not(.dark) .text-white,
html.dark .text-white {
    color: var(--text-tertiary);
}

html:not(.dark) .text-gray-500,
html.dark .text-gray-500,
html:not(.dark) .text-gray-400,
html.dark .text-gray-400 {
    color: var(--text-secondary);
}

/* Override dark: classes specifically */
html.dark .dark\:bg-gray-900 {
    background-color: var(--bg-primary) !important;
}

html.dark .dark\:bg-gray-800 {
    background-color: var(--bg-tertiary) !important;
}

html.dark .dark\:text-white {
    color: var(--text-tertiary) !important;
}

html.dark .dark\:text-gray-300,
html.dark .dark\:text-gray-400 {
    color: var(--text-secondary) !important;
}

/* Make dark elements lighter in dark mode */
html.dark .bg-gray-800:not(.dark\:bg-gray-800) {
    background-color: #4b5563 !important; /* gray-600 - lighter */
}

html.dark .text-gray-700 {
    color: var(--text-tertiary) !important; /* Light gray instead of dark */
}

html.dark .text-gray-400 {
    color: var(--text-quaternary) !important; /* Lighter gray */
}

html.dark .ring-gray-700,
html.dark .border-gray-700 {
    border-color: var(--border-light) !important;
}

html.dark .hover\:bg-gray-700:hover {
    background-color: var(--bg-quaternary) !important; /* Lighter hover */
}

/* Avatar circles and similar dark elements should be lighter in dark mode */
html.dark .rounded-full.bg-gray-800 {
    background-color: #6b7280 !important; /* gray-500 - much lighter */
}

/* Ensure all gray-800 backgrounds become lighter in dark mode */
html.dark [class*="bg-gray-800"]:not([class*="dark:bg-gray-800"]) {
    background-color: #4b5563 !important; /* gray-600 */
}

/* Text that's dark gray should become light in dark mode */
html.dark .text-gray-700,
html.dark .text-gray-600 {
    color: #e5e7eb !important; /* gray-200 - light */
}

/* Icons and borders */
html.dark .text-gray-400 {
    color: #9ca3af !important; /* gray-400 - lighter */
}

html.dark svg.text-gray-400 {
    color: #d1d5db !important; /* gray-300 - even lighter for icons */
}