style: calm down frontend visual system

app/globals.css

@@ -4,14 +4,42 @@
 
 :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%;
+  --accent-foreground: 0 0% 100%;
+  --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: 214 37% 9%;
+  --foreground: 210 31% 94%;
+  --surface: 214 33% 13%;
+  --surface-muted: 215 27% 17%;
+  --surface-raised: 214 29% 16%;
+  --border: 214 19% 27%;
+  --muted: 214 15% 70%;
+  --accent: 204 44% 66%;
+  --accent-foreground: 214 37% 9%;
+  --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: rgba(148, 163, 184, 0.2);
+  border-color: hsl(var(--border) / 0.72);
 }
 
 html {
@@ -21,14 +49,14 @@ html {
 
 body {
   min-height: 100vh;
-  background: #eef5fb;
-  color: #102238;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
   -webkit-font-smoothing: antialiased;
 }
 
 .dark body {
-  background: #07111f;
-  color: #edf7ff;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
 }
 
 button,
@@ -40,11 +68,19 @@ select {
 
 @layer utilities {
   .glass {
-    @apply border border-white/35 bg-white/45 shadow-glass backdrop-blur-2xl dark:border-white/10 dark:bg-slate-950/30;
+    @apply border border-border/70 bg-surface/80 shadow-card backdrop-blur-xl dark:bg-surface/75;
   }
 
   .glass-subtle {
-    @apply border border-white/25 bg-white/25 backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/20;
+    @apply border border-border/60 bg-surface-muted/65 backdrop-blur-xl dark:bg-surface-muted/55;
+  }
+
+  .surface-control {
+    @apply border border-border/70 bg-surface/80 shadow-soft backdrop-blur-xl dark:bg-surface-muted/70;
+  }
+
+  .section-kicker {
+    @apply text-xs font-semibold uppercase tracking-[0.16em] text-accent;
   }
 
   .text-balance {
@@ -58,7 +94,7 @@ select {
 
 @supports (-moz-appearance: none) {
   .weather-scrollbar {
-    scrollbar-color: rgba(8, 145, 178, 0.72) rgba(14, 116, 144, 0.1);
+    scrollbar-color: hsl(var(--accent) / 0.62) hsl(var(--border) / 0.32);
     scrollbar-width: thin;
   }
 }
@@ -70,28 +106,27 @@ select {
 
 .weather-scrollbar::-webkit-scrollbar-track {
   border-radius: 9999px;
-  background: rgba(14, 116, 144, 0.1);
+  background: hsl(var(--border) / 0.28);
 }
 
 .weather-scrollbar::-webkit-scrollbar-thumb {
-  border: 2px solid rgba(255, 255, 255, 0.3);
+  border: 2px solid hsl(var(--surface) / 0.78);
   border-radius: 9999px;
-  background: linear-gradient(90deg, rgba(8, 145, 178, 0.78), rgba(14, 116, 144, 0.88));
+  background: hsl(var(--accent) / 0.68);
   background-clip: padding-box;
-  box-shadow: 0 1px 5px rgba(8, 47, 73, 0.25);
 }
 
 .weather-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(90deg, rgba(6, 182, 212, 0.9), rgba(3, 105, 161, 0.95));
+  background: hsl(var(--accent) / 0.82);
   background-clip: padding-box;
 }
 
 .dark .weather-scrollbar::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
+  background: hsl(var(--border) / 0.35);
 }
 
 .dark .weather-scrollbar::-webkit-scrollbar-thumb {
-  border-color: rgba(255, 255, 255, 0.18);
-  background: linear-gradient(90deg, rgba(34, 211, 238, 0.72), rgba(56, 189, 248, 0.82));
+  border-color: hsl(var(--surface) / 0.72);
+  background: hsl(var(--accent) / 0.7);
   background-clip: padding-box;
 }

app/layout.tsx

@@ -36,8 +36,8 @@ export const viewport: Viewport = {
   initialScale: 1,
   viewportFit: "cover",
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#e8f4fb" },
-    { media: "(prefers-color-scheme: dark)", color: "#07111f" },
+    { media: "(prefers-color-scheme: light)", color: "#eef3f7" },
+    { media: "(prefers-color-scheme: dark)", color: "#0e1722" },
   ],
 };
 

app/offline/page.tsx

@@ -7,11 +7,11 @@ import { useI18n } from "@/lib/i18n";
 export default function OfflinePage() {
   const { t } = useI18n();
   return (
-    <section className="glass mx-auto mt-12 max-w-lg rounded-[2rem] p-8 text-center">
-      <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-sky-500/10 text-sky-700 dark:text-sky-300"><WifiOff className="size-6" /></div>
+    <section className="glass mx-auto mt-12 max-w-lg rounded-panel p-8 text-center">
+      <div className="mx-auto flex size-14 items-center justify-center rounded-control bg-accent/10 text-accent"><WifiOff className="size-6" /></div>
       <h1 className="mt-5 text-2xl font-semibold tracking-tight">{t("offline.title")}</h1>
-      <p className="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">{t("offline.description")}</p>
-      <Link href="/" className="mt-6 inline-flex rounded-full bg-slate-950 px-4 py-2.5 text-sm font-medium text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:bg-white dark:text-slate-950">{t("offline.back")}</Link>
+      <p className="mt-2 text-sm leading-6 text-muted">{t("offline.description")}</p>
+      <Link href="/" className="mt-6 inline-flex rounded-control bg-foreground px-4 py-2.5 text-sm font-medium text-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent">{t("offline.back")}</Link>
     </section>
   );
 }