feat: modernizar tema visual

src/App.tsx

@@ -71,7 +71,7 @@ export default function App() {
           fetchedAt: new Date().toISOString(),
           source: 'mock',
         });
-        setError('A API nao respondeu agora. Exibindo dados de exemplo para manter a leitura do dia utilizavel.');
+        setError('A API não respondeu agora. Exibindo dados de exemplo para manter a leitura do dia utilizável.');
       } finally {
         setIsLoading(false);
       }
@@ -101,7 +101,7 @@ export default function App() {
 
   function handleUseCurrentLocation() {
     if (!navigator.geolocation) {
-      setError('Este navegador nao oferece geolocalizacao. Busque uma cidade pelo nome.');
+      setError('Este navegador não oferece geolocalização. Busque uma cidade pelo nome.');
       return;
     }
 
@@ -110,7 +110,7 @@ export default function App() {
       (position) => {
         const location: LocationOption = {
           id: 'browser-location',
-          name: 'Sua localizacao',
+          name: 'Sua localização',
           latitude: position.coords.latitude,
           longitude: position.coords.longitude,
         };
@@ -118,7 +118,7 @@ export default function App() {
       },
       () => {
         setIsLoading(false);
-        setError('Nao foi possivel acessar sua localizacao. Voce pode pesquisar uma cidade manualmente.');
+        setError('Não foi possível acessar sua localização. Você pode pesquisar uma cidade manualmente.');
       },
       { enableHighAccuracy: false, timeout: 9000, maximumAge: 10 * 60 * 1000 },
     );
@@ -156,10 +156,10 @@ export default function App() {
       <main className="dashboard-shell" aria-busy={isLoading}>
         {error && <ErrorBanner message={error} onRetry={() => loadWeather(activeLocation)} />}
         <div className="dashboard-intro">
-          <p className="eyebrow">Orientacao geral, nao recomendacao medica</p>
+          <p className="eyebrow">Orientação geral, não recomendação médica</p>
           <p>
-            Leitura combinada de clima, UV e qualidade do ar para decidir saida, exercicio, deslocamento
+            Leitura combinada de clima, UV e qualidade do ar para decidir saída, exercício, deslocamento
-            e protecao diaria.
+            e proteção diária.
           </p>
         </div>
 

src/styles.css

@@ -1,19 +1,22 @@
 :root {
   color-scheme: light;
-  --bg: oklch(98% 0.007 175);
+  --bg: oklch(97% 0.018 205);
   --surface: oklch(100% 0 0);
-  --surface-soft: oklch(96% 0.012 170);
+  --surface-soft: oklch(95% 0.02 205);
+  --glass: oklch(100% 0 0 / 0.78);
   --fg: oklch(19% 0.025 190);
   --muted: oklch(47% 0.025 190);
   --muted-2: oklch(62% 0.02 190);
-  --border: oklch(88% 0.014 180);
+  --border: oklch(86% 0.028 205);
-  --accent: oklch(55% 0.12 170);
+  --accent: oklch(58% 0.13 208);
-  --accent-2: oklch(62% 0.15 35);
+  --accent-2: oklch(70% 0.15 82);
   --green: oklch(58% 0.14 155);
   --yellow: oklch(72% 0.13 88);
   --orange: oklch(66% 0.16 50);
   --red: oklch(58% 0.19 25);
-  --shadow: 0 22px 70px -44px oklch(22% 0.05 190 / 0.55);
+  --sky-glow: oklch(83% 0.105 215 / 0.42);
+  --sun-glow: oklch(85% 0.16 82 / 0.28);
+  --shadow: 0 24px 72px -44px oklch(22% 0.06 215 / 0.55);
   --radius: 22px;
   --radius-sm: 14px;
   --font-display: "Avenir Next", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
@@ -23,6 +26,27 @@
   color: var(--fg);
 }
 
+html[data-theme='dark'] {
+  color-scheme: dark;
+  --bg: oklch(18% 0.035 236);
+  --surface: oklch(23% 0.04 236);
+  --surface-soft: oklch(27% 0.045 236);
+  --glass: oklch(23% 0.04 236 / 0.76);
+  --fg: oklch(96% 0.012 220);
+  --muted: oklch(76% 0.028 220);
+  --muted-2: oklch(64% 0.03 220);
+  --border: oklch(37% 0.045 236);
+  --accent: oklch(73% 0.13 210);
+  --accent-2: oklch(78% 0.15 78);
+  --green: oklch(72% 0.13 155);
+  --yellow: oklch(82% 0.13 88);
+  --orange: oklch(75% 0.16 50);
+  --red: oklch(70% 0.18 25);
+  --sky-glow: oklch(42% 0.11 240 / 0.45);
+  --sun-glow: oklch(73% 0.15 78 / 0.18);
+  --shadow: 0 30px 82px -46px oklch(4% 0.02 236 / 0.82);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -37,7 +61,9 @@ body {
   margin: 0;
   overflow-x: clip;
   background:
-    linear-gradient(180deg, oklch(96% 0.017 174) 0, var(--bg) 360px),
+    radial-gradient(circle at 14% -12%, var(--sun-glow), transparent 34vw),
+    radial-gradient(circle at 84% 0, var(--sky-glow), transparent 36vw),
+    linear-gradient(180deg, color-mix(in oklch, var(--bg), var(--accent) 12%) 0, var(--bg) 420px),
     var(--bg);
   color: var(--fg);
   font-family: var(--font-body);
@@ -79,9 +105,10 @@ a {
   grid-template-columns: 1fr;
   gap: 14px;
   padding: 16px clamp(16px, 4vw, 34px);
-  border-bottom: 1px solid color-mix(in oklch, var(--border), white 24%);
+  border-bottom: 1px solid color-mix(in oklch, var(--border), transparent 20%);
-  background: oklch(98% 0.007 175 / 0.86);
+  background: var(--glass);
-  backdrop-filter: blur(18px);
+  box-shadow: 0 16px 44px -34px color-mix(in oklch, var(--fg), transparent 35%);
+  backdrop-filter: blur(20px) saturate(1.18);
 }
 
 .brand-mark {
@@ -106,6 +133,47 @@ a {
   background: color-mix(in oklch, var(--accent), white 89%);
 }
 
+.topbar-actions {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 40px;
+  width: fit-content;
+  padding: 0 14px;
+  border: 1px solid color-mix(in oklch, var(--border), var(--accent) 18%);
+  border-radius: 999px;
+  color: var(--fg);
+  background: color-mix(in oklch, var(--surface), var(--accent) 6%);
+  box-shadow: 0 14px 34px -28px color-mix(in oklch, var(--accent), black 45%);
+  font-size: 0.86rem;
+  font-weight: 780;
+  transition:
+    transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
+    border-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 180ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.theme-toggle:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in oklch, var(--accent), var(--fg) 8%);
+  background: color-mix(in oklch, var(--surface), var(--accent) 12%);
+}
+
+.theme-toggle:active {
+  transform: translateY(1px) scale(0.99);
+}
+
+.theme-toggle svg {
+  color: var(--accent-2);
+}
+
 .search-cluster {
   position: relative;
   display: grid;
@@ -842,8 +910,14 @@ a {
     align-items: end;
   }
 
-  .profile-selector {
+  .topbar-actions {
     grid-column: 1 / -1;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: end;
+  }
+
+  .profile-selector {
+    min-width: 0;
   }
 
   .search-cluster {
@@ -881,12 +955,14 @@ a {
 
 @media (min-width: 1180px) {
   .topbar {
-    grid-template-columns: auto minmax(440px, 1fr) minmax(480px, auto);
+    grid-template-columns: auto minmax(440px, 1fr) minmax(560px, auto);
     align-items: end;
   }
 
-  .profile-selector {
+  .topbar-actions {
     grid-column: auto;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: end;
   }
 
   .profile-options {
@@ -934,6 +1010,10 @@ a {
     padding: 12px 10px;
   }
 
+  .theme-toggle {
+    width: 100%;
+  }
+
   .semaforo-content {
     grid-template-columns: 1fr;
   }