/* 
 * Base CSS - Minimal styles that work with Tailwind CDN
 * Avoid global transitions to prevent flicker; rely on utility classes.
 */

/* Color tokens for future use (optional) */
:root {
  --color-bg: #f9fafb;          /* gray-50 */
  --color-surface: #ffffff;     /* white */
  --color-text: #111827;        /* gray-900 */
  --color-muted: #6b7280;       /* gray-500/600 */
  --color-border: #e5e7eb;      /* gray-200 */
  --color-primary: #3b82f6;     /* blue-500 */
}

.dark {
  --color-bg: #0f172a;          /* slate-900 */
  --color-surface: #1f2937;     /* gray-800 */
  --color-text: #e5e7eb;        /* gray-200 */
  --color-muted: #9ca3af;       /* gray-400 */
  --color-border: #374151;      /* gray-700 */
}

/* Opt-in transitions with utilities; keep html color-scheme in sync */
html { color-scheme: light dark; }

/* Dark-only mode - removed light mode overrides */

/* Hide [x-cloak] until Alpine initializes */
[x-cloak] { display: none !important; }

/* Custom scrollbar styling for webkit browsers */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(156, 163, 175, 0.8); }

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-thumb { background: rgba(75, 85, 99, 0.5); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(75, 85, 99, 0.8); }