style: reduce frontend visual effects

app/globals.css

@@ -12,7 +12,6 @@
   --border: 214 20% 82%;
   --muted: 215 14% 43%;
   --accent: 207 48% 34%;
-  --accent-foreground: 0 0% 100%;
   --warning: 38 58% 42%;
   --chart-temperature: 207 48% 36%;
   --chart-feels-like: 216 24% 48%;
@@ -22,15 +21,14 @@
 
 .dark {
   color-scheme: dark;
-  --background: 214 37% 9%;
+  --background: 220 22% 12%;
   --foreground: 210 31% 94%;
-  --surface: 214 33% 13%;
+  --surface: 220 18% 15%;
-  --surface-muted: 215 27% 17%;
+  --surface-muted: 220 15% 18%;
-  --surface-raised: 214 29% 16%;
+  --surface-raised: 220 16% 17%;
-  --border: 214 19% 27%;
+  --border: 220 12% 30%;
   --muted: 214 15% 70%;
-  --accent: 204 44% 66%;
+  --accent: 207 34% 64%;
-  --accent-foreground: 214 37% 9%;
   --warning: 39 64% 63%;
   --chart-temperature: 204 44% 66%;
   --chart-feels-like: 216 22% 73%;
@@ -68,15 +66,15 @@ select {
 
 @layer utilities {
   .glass {
-    @apply border border-border/70 bg-surface/80 shadow-card backdrop-blur-xl dark:bg-surface/75;
+    @apply border border-border/70 bg-surface shadow-soft;
   }
 
   .glass-subtle {
-    @apply border border-border/60 bg-surface-muted/65 backdrop-blur-xl dark:bg-surface-muted/55;
+    @apply border border-border/70 bg-surface-muted shadow-soft;
   }
 
   .surface-control {
-    @apply border border-border/70 bg-surface/80 shadow-soft backdrop-blur-xl dark:bg-surface-muted/70;
+    @apply border border-border/70 bg-surface shadow-soft dark:bg-surface-muted;
   }
 
   .section-kicker {

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import Script from "next/script";
 import { AppShell } from "@/components/layout/app-shell";
 import { Providers } from "@/components/layout/providers";
+import { APP_THEME_COLORS } from "@/lib/theme";
 import "@/app/globals.css";
 
 const inter = Inter({ subsets: ["latin", "latin-ext"], variable: "--font-inter" });
@@ -36,8 +37,8 @@ export const viewport: Viewport = {
   initialScale: 1,
   viewportFit: "cover",
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#eef3f7" },
+    { media: "(prefers-color-scheme: light)", color: APP_THEME_COLORS.light },
-    { media: "(prefers-color-scheme: dark)", color: "#0e1722" },
+    { media: "(prefers-color-scheme: dark)", color: APP_THEME_COLORS.dark },
   ],
 };
 

components/charts/day-forecast-charts.tsx

@@ -2,21 +2,12 @@
 
 import { Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 import { Card } from "@/components/ui/card";
+import { CHART_COLORS } from "@/lib/chart-theme";
 import { useI18n } from "@/lib/i18n";
 import { formatForecastRainfall, formatForecastTemperature } from "@/lib/forecast-utils";
 import type { HourlyForecast } from "@/types/forecast";
 
 const INITIAL_CHART_DIMENSION = { width: 1, height: 1 };
-const CHART_COLORS = {
-  grid: "hsl(var(--border) / 0.65)",
-  tooltipBorder: "hsl(var(--border) / 0.75)",
-  tooltipBackground: "hsl(var(--surface-raised) / 0.96)",
-  tooltipText: "hsl(var(--foreground))",
-  temperature: "hsl(var(--chart-temperature))",
-  feelsLike: "hsl(var(--chart-feels-like))",
-  rainfall: "hsl(var(--chart-rainfall))",
-  probability: "hsl(var(--chart-probability))",
-};
 
 function formatHour(value: string) {
   return value.slice(11, 16);

components/forecast/day-forecast-modal.tsx

@@ -84,7 +84,7 @@ export function DayForecastModal({
     <AnimatePresence>
       {day ? (
         <motion.div
-          className="fixed inset-0 z-[90] flex items-center justify-center bg-slate-950/55 p-0 backdrop-blur-sm sm:p-4 lg:p-8"
+          className="fixed inset-0 z-[90] flex items-center justify-center bg-slate-950/55 p-0 sm:p-4 lg:p-8"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}

components/layout/app-shell.tsx

@@ -17,7 +17,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   const { t } = useI18n();
   return (
     <div className="min-h-screen overflow-x-hidden bg-background">
-      <header className="sticky top-0 z-40 border-b border-border/70 bg-surface/80 backdrop-blur-xl dark:bg-background/80">
+      <header className="sticky top-0 z-40 border-b border-border/70 bg-surface">
         <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
           <Link href="/" className="text-2xl font-semibold tracking-[-0.09em] text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">
             wtr<span className="text-accent">.</span>
@@ -40,7 +40,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         </div>
       </header>
       <main className="mx-auto max-w-7xl px-4 pb-28 pt-5 sm:px-6 sm:pt-8 lg:px-8">{children}</main>
-      <nav aria-label={t("nav.mobile")} className="fixed inset-x-3 bottom-3 z-50 flex justify-around rounded-panel border border-border/70 bg-surface/90 p-1.5 shadow-card backdrop-blur-xl dark:bg-surface/90 md:hidden">
+      <nav aria-label={t("nav.mobile")} className="fixed inset-x-3 bottom-3 z-50 flex justify-around rounded-panel border border-border/70 bg-surface p-1.5 shadow-card md:hidden">
         {NAV_ITEMS.map((item, index) => {
           const Icon = icons[index];
           const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);

components/warnings/dashboard-warnings.tsx

@@ -73,7 +73,7 @@ export function DashboardWarnings() {
   return (
     <motion.section
       aria-label={t("warnings.dashboard.title")}
-      className="rounded-panel border border-warning/25 bg-warning/10 p-4 shadow-soft backdrop-blur-xl sm:p-5"
+      className="rounded-panel border border-warning/25 bg-warning/10 p-4 shadow-soft sm:p-5"
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.35, ease: "easeOut" }}
@@ -111,7 +111,7 @@ export function DashboardWarnings() {
           return (
             <article
               key={warning.id}
-              className="rounded-card border border-warning/20 bg-surface/60 px-3.5 py-3"
+              className="rounded-card border border-warning/20 bg-surface px-3.5 py-3"
             >
               <p className="text-[0.68rem] font-semibold uppercase tracking-[0.16em] text-warning">
                 {t(active ? "warnings.dashboard.active" : "warnings.dashboard.upcoming")}

components/weather/weather-effects.tsx

@@ -1,95 +1,36 @@
 "use client";
 
 import { motion, useReducedMotion } from "framer-motion";
-import type { SynopStation, WeatherMood } from "@/types/imgw";
 
-const windLines = Array.from({ length: 7 }, (_, index) => ({
+const rainDrops = Array.from({ length: 12 }, (_, index) => ({
-  top: `${18 + index * 11}%`,
-  delay: index * 0.22,
-  width: 70 + (index % 3) * 34,
-}));
-
-const stars = Array.from({ length: 16 }, (_, index) => ({
-  left: `${(index * 37 + 11) % 96}%`,
-  top: `${(index * 23 + 8) % 72}%`,
-  delay: (index % 6) * 0.35,
-}));
-
-const rainDrops = Array.from({ length: 22 }, (_, index) => ({
   left: `${(index * 43 + 7) % 101}%`,
   delay: (index % 9) * 0.18,
-  duration: 0.8 + (index % 4) * 0.14,
+  duration: 1.1 + (index % 4) * 0.18,
 }));
 
-export function WeatherEffects({ station, mood, precipitation10m, thunderstorm = false }: { station: SynopStation; mood: WeatherMood; precipitation10m?: number | null; thunderstorm?: boolean }) {
+export function WeatherEffects({ precipitation10m, thunderstorm = false }: { precipitation10m?: number | null; thunderstorm?: boolean }) {
   const reduceMotion = useReducedMotion();
-  const isWindy = (station.windSpeed ?? 0) >= 8;
   const isRaining = (precipitation10m ?? 0) > 0;
 
   return (
     <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
-      {mood === "cloudy" && (
-        <>
-          <motion.div
-            animate={reduceMotion ? undefined : { x: ["-4%", "5%", "-4%"], y: [0, 8, 0], scale: [1, 1.05, 1] }}
-            transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
-            className="absolute -left-24 -top-20 h-52 w-[78%] rounded-full bg-slate-100/25 blur-2xl"
-          />
-          <motion.div
-            animate={reduceMotion ? undefined : { x: ["8%", "-5%", "8%"], y: [0, -6, 0], scale: [1.04, 1, 1.04] }}
-            transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
-            className="absolute -right-24 top-0 h-60 w-[82%] rounded-full bg-slate-300/20 blur-2xl"
-          />
-          <div className="absolute inset-x-0 bottom-0 h-44 bg-gradient-to-t from-slate-100/25 via-slate-200/10 to-transparent" />
-          <div className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-slate-950/15 to-transparent" />
-        </>
-      )}
-      {mood === "warm" && (
-        <motion.div
-          animate={reduceMotion ? undefined : { scale: [1, 1.08, 1], opacity: [0.4, 0.58, 0.4] }}
-          transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
-          className="absolute -right-12 -top-16 size-52 rounded-full bg-amber-200/25 blur-2xl"
-        />
-      )}
-      {mood === "night" && stars.map((star, index) => (
-        <motion.span
-          key={index}
-          animate={reduceMotion ? undefined : { opacity: [0.2, 0.75, 0.2] }}
-          transition={{ duration: 2.4, delay: star.delay, repeat: Infinity, ease: "easeInOut" }}
-          className="absolute size-1 rounded-full bg-white/75"
-          style={{ left: star.left, top: star.top }}
-        />
-      ))}
-      {isWindy && windLines.map((line, index) => (
-        <motion.span
-          key={index}
-          initial={{ x: "-30%", opacity: 0 }}
-          animate={reduceMotion ? { opacity: 0.28 } : { x: ["-30%", "135%"], opacity: [0, 0.35, 0] }}
-          transition={{ duration: 3.4, delay: line.delay, repeat: Infinity, ease: "linear" }}
-          className="absolute h-px rounded-full bg-white/60"
-          style={{ top: line.top, width: line.width }}
-        />
-      ))}
       {isRaining && rainDrops.map((drop, index) => (
         <motion.span
           key={`rain-${index}`}
           initial={{ y: "-12vh", opacity: 0 }}
-          animate={reduceMotion ? { opacity: 0.36 } : { y: ["-12vh", "115vh"], opacity: [0, 0.55, 0] }}
+          animate={reduceMotion ? { opacity: 0.18 } : { y: ["-12vh", "115vh"], opacity: [0, 0.22, 0] }}
           transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
-          className="absolute -top-8 h-14 w-px rotate-[8deg] rounded-full bg-gradient-to-b from-transparent via-white/55 to-transparent blur-[0.35px]"
+          className="absolute -top-8 h-10 w-px rotate-[8deg] rounded-full bg-foreground/35"
           style={{ left: drop.left }}
         />
       ))}
       {thunderstorm && (
         <motion.div
-          animate={reduceMotion ? { opacity: 0.12 } : { opacity: [0, 0, 0.34, 0, 0.18, 0] }}
+          animate={reduceMotion ? { opacity: 0.08 } : { opacity: [0, 0, 0.16, 0, 0.08, 0] }}
           transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
-          className="absolute inset-0 bg-white"
+          className="absolute inset-0 bg-foreground"
         />
       )}
-      {mood === "cold" && (
-        <div className="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-blue-100/20 to-transparent" />
-      )}
     </div>
   );
 }

components/weather/weather-hero.tsx

@@ -12,7 +12,7 @@ import {
   formatWind,
   getWeatherDescription,
   getWeatherMoodFromData,
-  moodGradient,
+  moodAccentClass,
 } from "@/lib/weather-utils";
 import type { SynopStation } from "@/types/imgw";
 import type { ImgwCurrentWeather } from "@/types/imgw-current";
@@ -37,6 +37,7 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
     rainfall: currentWeather.precipitation10m ?? station.rainfall,
   } : station;
   const mood = getWeatherMoodFromData(displayedStation);
+  const moodAccent = moodAccentClass(mood);
   const feelsLike = currentWeather?.feelsLike ?? calculateFeelsLike(displayedStation.temperature, displayedStation.humidity, displayedStation.windSpeed);
   const metrics = [
     { icon: Droplets, label: t("weather.humidity"), value: formatHumidity(displayedStation.humidity, language) },
@@ -50,13 +51,18 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
       initial={{ opacity: 0, y: 18 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.55, ease: "easeOut" }}
-      className={`relative isolate overflow-hidden rounded-panel bg-gradient-to-br ${moodGradient(mood)} px-5 py-6 text-white shadow-card sm:px-8 sm:py-8 lg:px-10`}
+      className="relative isolate overflow-hidden rounded-panel border border-border/70 bg-surface-raised px-5 py-6 shadow-card sm:px-8 sm:py-8 lg:px-10"
     >
-      <WeatherEffects station={displayedStation} mood={mood} precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
+      <WeatherEffects precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
       <div className="relative z-10">
         <div>
-          <span className="flex items-center gap-1.5 text-sm font-medium text-white/85"><MapPin className="size-4" />{displayedLocationName}</span>
+          <div className="flex flex-wrap items-center gap-2">
-          <div className="mt-1.5 space-y-1 text-xs text-white/65">
+            <span className="flex items-center gap-1.5 text-sm font-medium text-muted"><MapPin className="size-4" />{displayedLocationName}</span>
+            <span className={`rounded-control border px-2.5 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.14em] ${moodAccent}`}>
+              {getWeatherDescription(displayedStation, language, currentWeather?.condition)}
+            </span>
+          </div>
+          <div className="mt-2 space-y-1 text-xs text-muted">
             <p>{currentWeatherLoading
               ? t("location.heroHybridLoading", { station: station.name })
               : hasFullHybridAnalysis
@@ -67,7 +73,7 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
                 ? t("location.heroStationFallbackWithDistance", { station: station.name, distance: distanceKm ?? 0 })
                 : t("location.heroStationFallback", { station: station.name })}</p>
             {hasFullHybridAnalysis && locationName && <p>{t("location.heroNearestStation", { station: station.name, distance: distanceKm ?? 0 })}</p>}
-            {hasDistantFallback && <p className="flex items-start gap-1.5 text-amber-100"><AlertTriangle className="mt-0.5 size-3.5 shrink-0" />{t("location.heroDistantFallback")}</p>}
+            {hasDistantFallback && <p className="flex items-start gap-1.5 text-warning"><AlertTriangle className="mt-0.5 size-3.5 shrink-0" />{t("location.heroDistantFallback")}</p>}
           </div>
         </div>
         <div className="mt-8 flex items-end justify-between gap-3 sm:mt-10">
@@ -76,20 +82,20 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
               {formatTemperature(displayedStation.temperature, language)}
             </div>
             <p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(displayedStation, language, currentWeather?.condition)}</p>
-            <p className="mt-1 text-sm text-white/75">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(displayedStation.measuredAt, language)}</p>
+            <p className="mt-1 text-sm text-muted">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(displayedStation.measuredAt, language)}</p>
           </div>
-          <WeatherIcon mood={mood} condition={currentWeather?.condition} className="mb-4 size-20 text-white/80 sm:size-28" />
+          <WeatherIcon mood={mood} condition={currentWeather?.condition} className="mb-4 size-20 text-accent sm:size-28" />
         </div>
         <div className="mt-8 grid grid-cols-2 gap-2.5 sm:mt-10 lg:grid-cols-4">
           {metrics.map(({ icon: Icon, label, value }) => (
-            <div key={label} className="rounded-card border border-white/20 bg-white/10 p-3.5 backdrop-blur-xl">
+            <div key={label} className="rounded-card border border-border/60 bg-surface-muted p-3.5">
-              <div className="flex items-center gap-2 text-xs text-white/70"><Icon className="size-3.5" />{label}</div>
+              <div className="flex items-center gap-2 text-xs text-muted"><Icon className="size-3.5 text-accent" />{label}</div>
               <p className="mt-2 text-base font-semibold">{value}</p>
             </div>
           ))}
         </div>
         {displayedStation.windDirection !== null && (
-          <p className="mt-4 flex items-center gap-1.5 text-xs text-white/70">
+          <p className="mt-4 flex items-center gap-1.5 text-xs text-muted">
             <Navigation className="size-3.5" style={{ transform: `rotate(${displayedStation.windDirection}deg)` }} />
             {t("weather.windDirection")}: {displayedStation.windDirection}°
           </p>

lib/chart-theme.ts

@@ -0,0 +1,10 @@
+export const CHART_COLORS = {
+  grid: "hsl(var(--border) / 0.65)",
+  tooltipBorder: "hsl(var(--border) / 0.75)",
+  tooltipBackground: "hsl(var(--surface-raised) / 0.98)",
+  tooltipText: "hsl(var(--foreground))",
+  temperature: "hsl(var(--chart-temperature))",
+  feelsLike: "hsl(var(--chart-feels-like))",
+  rainfall: "hsl(var(--chart-rainfall))",
+  probability: "hsl(var(--chart-probability))",
+} as const;

lib/theme.ts

@@ -0,0 +1,4 @@
+export const APP_THEME_COLORS = {
+  light: "#eef3f7",
+  dark: "#171d25",
+} as const;

lib/weather-utils.ts

@@ -184,13 +184,13 @@ export function getWeatherDescription(station: SynopStation, language: Language
   return translate(language, "weather.calm");
 }
 
-export function moodGradient(mood: WeatherMood) {
+export function moodAccentClass(mood: WeatherMood) {
   return {
-    warm: "from-blue-500 via-blue-700 to-slate-900",
+    warm: "border-accent/25 bg-accent/10 text-accent",
-    cloudy: "from-slate-600 via-slate-700 to-slate-900",
+    cloudy: "border-border/70 bg-surface-muted text-muted",
-    wind: "from-slate-500 via-blue-700 to-slate-900",
+    wind: "border-border/70 bg-surface-muted text-muted",
-    cold: "from-blue-300 via-slate-500 to-slate-800",
+    cold: "border-border/70 bg-surface-muted text-muted",
-    night: "from-slate-800 via-slate-900 to-slate-950",
+    night: "border-border/70 bg-surface-muted text-muted",
-    mild: "from-blue-500 via-slate-700 to-slate-900",
+    mild: "border-accent/25 bg-accent/10 text-accent",
   }[mood];
 }

tailwind.config.ts

@@ -19,7 +19,6 @@ export default {
         border: "hsl(var(--border) / <alpha-value>)",
         muted: "hsl(var(--muted) / <alpha-value>)",
         accent: "hsl(var(--accent) / <alpha-value>)",
-        "accent-foreground": "hsl(var(--accent-foreground) / <alpha-value>)",
         warning: "hsl(var(--warning) / <alpha-value>)",
       },
       fontFamily: {
@@ -32,7 +31,6 @@ export default {
       },
       boxShadow: {
         card: "0 16px 42px hsl(215 32% 18% / 0.08)",
-        glass: "0 16px 42px hsl(215 32% 18% / 0.08)",
         soft: "0 10px 28px hsl(215 32% 18% / 0.06)",
       },
     },