@tailwind base; @tailwind components; @tailwind utilities; @layer base { /* ---- Dark theme (default) ---------------------------------------- */ :root, .dark { --background: 214 10% 8%; --foreground: 210 13% 89%; --card: 214 9% 11%; --card-foreground: 210 13% 89%; --popover: 214 10% 10%; --popover-foreground: 210 13% 89%; --primary: 157 39% 43%; --primary-foreground: 156 32% 9%; --secondary: 214 8% 16%; --secondary-foreground: 210 13% 89%; --muted: 214 8% 14%; --muted-foreground: 214 7% 58%; --accent: 199 34% 56%; --accent-foreground: 205 35% 10%; --success: 150 38% 47%; --warning: 35 66% 55%; --danger: 4 56% 58%; --border: 214 8% 17%; --input: 214 8% 19%; --ring: 157 39% 43%; --radius: 0.5rem; } /* ---- Light theme (future-ready: add `light` class to ) ------ */ .light { --background: 210 16% 98%; --foreground: 215 19% 15%; --card: 0 0% 100%; --card-foreground: 215 19% 15%; --popover: 0 0% 100%; --popover-foreground: 215 19% 15%; --primary: 157 41% 34%; --primary-foreground: 0 0% 100%; --secondary: 214 16% 93%; --secondary-foreground: 215 19% 20%; --muted: 214 17% 95%; --muted-foreground: 216 10% 42%; --accent: 199 40% 40%; --accent-foreground: 0 0% 100%; --success: 150 42% 33%; --warning: 32 66% 40%; --danger: 4 56% 48%; --border: 214 15% 88%; --input: 214 15% 84%; --ring: 157 41% 34%; } * { @apply border-border; } body { @apply bg-background text-foreground antialiased; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Barely-there dot grid adds depth without the AI neon-gradient feel. */ background-image: radial-gradient( hsl(var(--foreground) / 0.035) 1px, transparent 1px ); background-size: 30px 30px; } html { scroll-behavior: smooth; } } @layer utilities { .glass { background: hsl(var(--background) / 0.8); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); } .grid-bg { background-image: radial-gradient( hsl(var(--border) / 0.5) 1px, transparent 1px ); background-size: 22px 22px; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } } /* ---- Leaflet dark-map polish --------------------------------------- */ .leaflet-container { background: hsl(var(--background)); font-family: inherit; } .leaflet-bar, .leaflet-bar a { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--border)) !important; } .leaflet-bar a:hover { background: hsl(var(--secondary)); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border-radius: var(--radius); box-shadow: 0 8px 28px hsl(220 30% 2% / 0.45); } .leaflet-popup-content { margin: 0.85rem 1rem; font-size: 0.8rem; } .leaflet-control-attribution { background: hsl(var(--card) / 0.7) !important; color: hsl(var(--muted-foreground)) !important; } .leaflet-control-attribution a { color: hsl(var(--accent)) !important; }