wtr/app/globals.css

@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: 100dvh;
  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;
}

@media (max-width: 639px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@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;
  }

  .app-header-safe {
    padding-top: env(safe-area-inset-top);
  }

  .app-main-safe {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom));
  }

  .mobile-nav-safe {
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    left: calc(0.75rem + env(safe-area-inset-left));
    right: calc(0.75rem + env(safe-area-inset-right));
  }

  .modal-overlay {
    position: fixed;
    inset: -1px 0 0;
    box-sizing: border-box;
    height: calc(100dvh + 1px);
    min-height: calc(100dvh + 1px);
    background: hsl(var(--foreground) / 0.55);
  }

  .modal-safe-area {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}

@media (min-width: 640px) {
  @layer utilities {
    .modal-safe-area {
      padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
        calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    }
  }
}

@media (min-width: 1024px) {
  @layer utilities {
    .modal-safe-area {
      padding: calc(2rem + env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-right))
        calc(2rem + env(safe-area-inset-bottom)) calc(2rem + env(safe-area-inset-left));
    }
  }
}

@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;
}