/* Global theme variables and dark mode overrides extracted from layouts.layout */
:root{
    --bg: #ffffff; /* pure white base */
    --bg-grad: radial-gradient(1200px 600px at 10% -10%, #e0e7ff 0%, transparent 60%),
                radial-gradient(900px 500px at 110% 10%, #fee2e2 0%, transparent 60%);
    --card-bg: rgba(255,255,255,0.85);
    --border: rgba(17,24,39,0.12);
    --text: #1e293b; /* slate-800 for better contrast */
    --muted: #475569; /* slate-600 for better readability */
    --primary: #1d4ed8; /* blue-700 for accessibility */
    --primary-2: #7c3aed;
    --accent: #059669; /* emerald-600 for better contrast */
    --ring: 0 0 0 3px rgba(29,78,216,0.35);
}
.dark{
    /* Enhanced dark blue background for entire page in dark mode */
    --bg: #0f172a; /* slate-900 for better consistency */
    --bg-grad: none; /* remove gradients in dark mode */
    --card-bg: rgba(30,41,59,0.90); /* slate-800 with higher opacity */
    --border: rgba(71,85,105,0.25); /* slate-600 for better definition */
    --text: #f1f5f9; /* slate-100 for improved readability */
    --muted: #cbd5e1; /* slate-300 for better visibility */
    --primary: #0d62ffff; /* blue-500 */
    --primary-2: #a78bfa;
    --accent: #10b981; /* emerald-500 */
    --ring: 0 0 0 3px rgba(59,130,246,0.35);
}
@media (prefers-color-scheme: dark){
    :root{
        /* Enhanced dark colors when OS is in dark mode and theme=system */
        --bg: #0f172a;
        --bg-grad: none;
        --card-bg: rgba(30,41,59,0.90);
        --border: rgba(71,85,105,0.25);
        --text: #f1f5f9;
        --muted: #cbd5e1;
        --primary: #0d62ffff;
        --primary-2: #a78bfa;
        --accent: #10b981;
        --ring: 0 0 0 3px rgba(59,130,246,0.35);
    }
}
html { scroll-behavior: smooth; }
body { background: var(--bg); background-image: var(--bg-grad); color: var(--text); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; }
.dark .bg-white { background: var(--card-bg) !important; }
.dark .rounded-lg { background: var(--card-bg) !important; }
.dark .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important; }
.dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700, .dark .text-gray-600 { color: var(--text) !important; }
.dark .text-gray-500, .dark .text-gray-400, .dark .text-gray-300 { color: var(--muted) !important; }

/* Google Picker overlay elevation (moved from inline style) */
.picker-dialog, .picker-modal-holder, .picker-dialog-bg { z-index:2147483647 !important; }
body > .picker-dialog { position:fixed !important; }

/* Ensure the entire canvas uses dark blue in dark mode, even if utilities add bg-*/
html.dark, html.dark body { background: var(--bg) !important; background-image: var(--bg-grad) !important; }
.dark .bg-gray-50, .dark .bg-gray-100 { background: var(--bg) !important; }
.dark .bg-white { background: var(--card-bg) !important; }
.dark .rounded-lg { background: var(--card-bg) !important; }
.dark .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important; }
.dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700, .dark .text-gray-600 { color: var(--text) !important; }
.dark .text-gray-500, .dark .text-gray-400, .dark .text-gray-300 { color: var(--muted) !important; }