@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
  --background: 210 32% 95%;
  --foreground: 214 35% 16%;
  --surface: 210 35% 99%;
  --surface-muted: 210 26% 92%;
  --surface-raised: 0 0% 100%;
  --border: 214 20% 82%;
  --muted: 215 14% 43%;
  --accent: 207 48% 34%;
  --warning: 38 58% 42%;
  --chart-temperature: 207 48% 36%;
  --chart-feels-like: 216 24% 48%;
  --chart-rainfall: 202 38% 45%;
  --chart-probability: 214 28% 38%;
}

.dark {
  color-scheme: dark;
  --background: 220 22% 12%;
  --foreground: 210 31% 94%;
  --surface: 220 18% 15%;
  --surface-muted: 220 15% 18%;
  --surface-raised: 220 16% 17%;
  --border: 220 12% 30%;
  --muted: 214 15% 70%;
  --accent: 207 34% 64%;
  --warning: 39 64% 63%;
  --chart-temperature: 204 44% 66%;
  --chart-feels-like: 216 22% 73%;
  --chart-rainfall: 202 42% 68%;
  --chart-probability: 214 26% 76%;
}

* {
  border-color: hsl(var(--border) / 0.72);
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

.dark body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

button,
a,
input,
select {
  outline-offset: 3px;
}

@layer utilities {
  .glass {
    @apply border border-border/70 bg-surface shadow-soft;
  }

  .glass-subtle {
    @apply border border-border/70 bg-surface-muted shadow-soft;
  }

  .surface-control {
    @apply border border-border/70 bg-surface shadow-soft dark:bg-surface-muted;
  }

  .section-kicker {
    @apply text-xs font-semibold uppercase tracking-[0.16em] text-accent;
  }

  .text-balance {
    text-wrap: balance;
  }

  .weather-scrollbar {
    scrollbar-gutter: stable;
  }
}

@supports (-moz-appearance: none) {
  .weather-scrollbar {
    scrollbar-color: hsl(var(--accent) / 0.62) hsl(var(--border) / 0.32);
    scrollbar-width: thin;
  }
}

.weather-scrollbar::-webkit-scrollbar {
  height: 0.65rem;
  width: 0.65rem;
}

.weather-scrollbar::-webkit-scrollbar-track {
  border-radius: 9999px;
  background: hsl(var(--border) / 0.28);
}

.weather-scrollbar::-webkit-scrollbar-thumb {
  border: 2px solid hsl(var(--surface) / 0.78);
  border-radius: 9999px;
  background: hsl(var(--accent) / 0.68);
  background-clip: padding-box;
}

.weather-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--accent) / 0.82);
  background-clip: padding-box;
}

.dark .weather-scrollbar::-webkit-scrollbar-track {
  background: hsl(var(--border) / 0.35);
}

.dark .weather-scrollbar::-webkit-scrollbar-thumb {
  border-color: hsl(var(--surface) / 0.72);
  background: hsl(var(--accent) / 0.7);
  background-clip: padding-box;
}