Adicionei um tema agua?

public/css/style.css

@@ -1,14 +1,14 @@
 :root {
     /* Tema Kawaii Rosinha */
     --primary-color-light: #ffb6d5; /* rosa claro */
-    --primary-variant-color-light: #ff69b4; /* rosa mais forte */
+    --primary-variant-color-light: #698cff; /* rosa mais forte */
     --secondary-color-light: #ffe0f7; /* rosa bebê */
     --background-color-light: #fff0fa; /* fundo rosinha pastel */
     --surface-color-light: #fff7fb; /* superfície ainda mais clara */
     --error-color-light: #ff6f91; /* rosa avermelhado */
     --success-color-light: #b5ead7; /* verde menta pastel */
     --on-primary-color-light: #fff0fa; /* texto sobre rosa */
-    --on-secondary-color-light: #ff69b4; /* texto sobre secundário */
+    --on-secondary-color-light: #69ffeb; /* texto sobre secundário */
     --on-background-color-light: #ff69b4; /* texto sobre fundo */
     --on-surface-color-light: #ff69b4; /* texto sobre superfície */
     --text-color-light: #e75480; /* rosa escuro para texto */
@@ -37,9 +37,43 @@
     --card-shadow-dark: 0 4px 12px rgba(255, 182, 213, 0.25);
     --hover-bg-dark: #4a274a;
 
-    /* Tamanhos */
-    --border-radius: 12px;
-    --card-spacing: 16px;
+    /* Tema Água Light */
+    --primary-color-water-light: #3ec6e0; /* azul piscina */
+    --primary-variant-color-water-light: #1ca7ec; /* azul mais forte */
+    --secondary-color-water-light: #b2f0fb; /* azul clarinho */
+    --background-color-water-light: #e6faff; /* fundo azul pastel */
+    --surface-color-water-light: #f4fdff; /* superfície ainda mais clara */
+    --error-color-water-light: #ff6f91; /* mantém para consistência */
+    --success-color-water-light: #7be9c9; /* verde água */
+    --on-primary-color-water-light: #e6faff; /* texto sobre azul */
+    --on-secondary-color-water-light: #1ca7ec; /* texto sobre secundário */
+    --on-background-color-water-light: #1ca7ec; /* texto sobre fundo */
+    --on-surface-color-water-light: #1ca7ec; /* texto sobre superfície */
+    --text-color-water-light: #187b9b; /* azul escuro para texto */
+    --text-secondary-water-light: #5ec6e0; /* azul médio */
+    --border-color-water-light: #b2f0fb; /* borda azul clara */
+    --input-bg-water-light: #d2f4fa; /* input azul claro */
+    --card-shadow-water-light: 0 4px 12px rgba(62, 198, 224, 0.15);
+    --hover-bg-water-light: #b2f0fb;
+
+    /* Tema Água Dark */
+    --primary-color-water-dark: #1ca7ec;
+    --primary-variant-color-water-dark: #187b9b;
+    --secondary-color-water-dark: #5ec6e0;
+    --background-color-water-dark: #0a2233;
+    --surface-color-water-dark: #13344a;
+    --error-color-water-dark: #ff6f91;
+    --success-color-water-dark: #7be9c9;
+    --on-primary-color-water-dark: #e6faff;
+    --on-secondary-color-water-dark: #e6faff;
+    --on-background-color-water-dark: #b2f0fb;
+    --on-surface-color-water-dark: #b2f0fb;
+    --text-color-water-dark: #b2f0fb;
+    --text-secondary-water-dark: #5ec6e0;
+    --border-color-water-dark: #5ec6e0;
+    --input-bg-water-dark: #13344a;
+    --card-shadow-water-dark: 0 4px 12px rgba(62, 198, 224, 0.25);
+    --hover-bg-water-dark: #13344a;
 }
 
 * {
@@ -63,44 +97,92 @@ body {
 
 /* Use as variáveis de tema claro por padrão */
 body {
-    --primary-color: var(--primary-color-light);
-    --primary-variant-color: var(--primary-variant-color-light);
-    --secondary-color: var(--secondary-color-light);
-    --background-color: var(--background-color-light);
-    --surface-color: var(--surface-color-light);
-    --error-color: var(--error-color-light);
-    --success-color: var(--success-color-light);
-    --on-primary-color: var(--on-primary-color-light);
-    --on-secondary-color: var(--on-secondary-color-light);
-    --on-background-color: var(--on-background-color-light);
-    --on-surface-color: var(--on-surface-color-light);
-    --text-color: var(--text-color-light);
-    --text-secondary: var(--text-secondary-light);
-    --border-color: var(--border-color-light);
-    --input-bg: var(--input-bg-light);
-    --card-shadow: var(--card-shadow-light);
-    --hover-bg: var(--hover-bg-light);
+    --primary-color: var(--primary-color-water-light);
+    --primary-variant-color: var(--primary-variant-color-water-light);
+    --secondary-color: var(--secondary-color-water-light);
+    --background-color: var(--background-color-water-light);
+    --surface-color: var(--surface-color-water-light);
+    --error-color: var(--error-color-water-light);
+    --success-color: var(--success-color-water-light);
+    --on-primary-color: var(--on-primary-color-water-light);
+    --on-secondary-color: var(--on-secondary-color-water-light);
+    --on-background-color: var(--on-background-color-water-light);
+    --on-surface-color: var(--on-surface-color-water-light);
+    --text-color: var(--text-color-water-light);
+    --text-secondary: var(--text-secondary-water-light);
+    --border-color: var(--border-color-water-light);
+    --input-bg: var(--input-bg-water-light);
+    --card-shadow: var(--card-shadow-water-light);
+    --hover-bg: var(--hover-bg-water-light);
 }
 
 /* Tema escuro */
 body.dark-mode {
-    --primary-color: var(--primary-color-dark);
-    --primary-variant-color: var(--primary-variant-color-dark);
-    --secondary-color: var(--secondary-color-dark);
-    --background-color: var(--background-color-dark);
-    --surface-color: var(--surface-color-dark);
-    --error-color: var(--error-color-dark);
-    --success-color: var(--success-color-dark);
-    --on-primary-color: var(--on-primary-color-dark);
-    --on-secondary-color: var(--on-secondary-color-dark);
-    --on-background-color: var(--on-background-color-dark);
-    --on-surface-color: var(--on-surface-color-dark);
-    --text-color: var(--text-color-dark);
-    --text-secondary: var(--text-secondary-dark);
-    --border-color: var(--border-color-dark);
-    --input-bg: var(--input-bg-dark);
-    --card-shadow: var(--card-shadow-dark);
-    --hover-bg: var(--hover-bg-dark);
+    --primary-color: var(--primary-color-water-dark);
+    --primary-variant-color: var(--primary-variant-color-water-dark);
+    --secondary-color: var(--secondary-color-water-dark);
+    --background-color: var(--background-color-water-dark);
+    --surface-color: var(--surface-color-water-dark);
+    --error-color: var(--error-color-water-dark);
+    --success-color: var(--success-color-water-dark);
+    --on-primary-color: var(--on-primary-color-water-dark);
+    --on-secondary-color: var(--on-secondary-color-water-dark);
+    --on-background-color: var(--on-background-color-water-dark);
+    --on-surface-color: var(--on-surface-color-water-dark);
+    --text-color: var(--text-color-water-dark);
+    --text-secondary: var(--text-secondary-water-dark);
+    --border-color: var(--border-color-water-dark);
+    --input-bg: var(--input-bg-water-dark);
+    --card-shadow: var(--card-shadow-water-dark);
+    --hover-bg: var(--hover-bg-water-dark);
+
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+/* Tema Água Light */
+body.water-mode {
+    --primary-color: var(--primary-color-water-light);
+    --primary-variant-color: var(--primary-variant-color-water-light);
+    --secondary-color: var(--secondary-color-water-light);
+    --background-color: var(--background-color-water-light);
+    --surface-color: var(--surface-color-water-light);
+    --error-color: var(--error-color-water-light);
+    --success-color: var(--success-color-water-light);
+    --on-primary-color: var(--on-primary-color-water-light);
+    --on-secondary-color: var(--on-secondary-color-water-light);
+    --on-background-color: var(--on-background-color-water-light);
+    --on-surface-color: var(--on-surface-color-water-light);
+    --text-color: var(--text-color-water-light);
+    --text-secondary: var(--text-secondary-water-light);
+    --border-color: var(--border-color-water-light);
+    --input-bg: var(--input-bg-water-light);
+    --card-shadow: var(--card-shadow-water-light);
+    --hover-bg: var(--hover-bg-water-light);
+
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+/* Tema Água Escuro */
+body.water-mode.dark-mode {
+    --primary-color: var(--primary-color-water-dark);
+    --primary-variant-color: var(--primary-variant-color-water-dark);
+    --secondary-color: var(--secondary-color-water-dark);
+    --background-color: var(--background-color-water-dark);
+    --surface-color: var(--surface-color-water-dark);
+    --error-color: var(--error-color-water-dark);
+    --success-color: var(--success-color-water-dark);
+    --on-primary-color: var(--on-primary-color-water-dark);
+    --on-secondary-color: var(--on-secondary-color-water-dark);
+    --on-background-color: var(--on-background-color-water-dark);
+    --on-surface-color: var(--on-surface-color-water-dark);
+    --text-color: var(--text-color-water-dark);
+    --text-secondary: var(--text-secondary-water-dark);
+    --border-color: var(--border-color-water-dark);
+    --input-bg: var(--input-bg-water-dark);
+    --card-shadow: var(--card-shadow-water-dark);
+    --hover-bg: var(--hover-bg-water-dark);
 
     background-color: var(--background-color);
     color: var(--text-color);

public/index.html

@@ -12,6 +12,7 @@
         <span class="theme-toggle-icon light-icon">☀️</span>
         <span class="theme-toggle-icon dark-icon">🌙</span>
     </button>
+    <button id="water-theme-toggle" class="icon-button" title="Tema Água" aria-label="Alternar tema Água">💧</button>
 
     <header class="app-header">
         <h1>Focus On</h1>

public/js/app.js

@@ -26,16 +26,38 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Theme Toggler Logic
     const themeToggleButton = document.getElementById('theme-toggle');
-    if (themeToggleButton) {
-        const currentTheme = localStorage.getItem('focusOnTheme') || 'light';
-        document.body.classList.toggle('dark-mode', currentTheme === 'dark');
-
-        themeToggleButton.addEventListener('click', () => {
-            document.body.classList.toggle('dark-mode');
-            const theme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
-            localStorage.setItem('focusOnTheme', theme);
-        });
+    // Adiciona botão para alternar tema Água
+    let waterThemeButton = document.getElementById('water-theme-toggle');
+    if (!waterThemeButton) {
+        waterThemeButton = document.createElement('button');
+        waterThemeButton.id = 'water-theme-toggle';
+        waterThemeButton.className = 'icon-button';
+        waterThemeButton.title = 'Tema Água';
+        waterThemeButton.setAttribute('aria-label', 'Alternar tema Água');
+        waterThemeButton.innerHTML = '💧';
+        themeToggleButton.parentNode.insertBefore(waterThemeButton, themeToggleButton.nextSibling);
     }
+
+    // Carregar tema salvo
+    const currentTheme = localStorage.getItem('focusOnTheme') || 'light';
+    document.body.classList.toggle('dark-mode', currentTheme === 'dark');
+    document.body.classList.toggle('water-mode', currentTheme === 'water');
+
+    themeToggleButton.addEventListener('click', () => {
+        // Alterna entre claro e escuro, mas remove água
+        document.body.classList.toggle('dark-mode');
+        document.body.classList.remove('water-mode');
+        const theme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
+        localStorage.setItem('focusOnTheme', theme);
+    });
+
+    waterThemeButton.addEventListener('click', () => {
+        // Ativa/desativa tema água e remove dark-mode
+        const isWater = !document.body.classList.contains('water-mode');
+        document.body.classList.toggle('water-mode', isWater);
+        document.body.classList.remove('dark-mode');
+        localStorage.setItem('focusOnTheme', isWater ? 'water' : 'light');
+    });
 
     // Toggle para mostrar/esconder o campo de entrada de tarefas
     const addTaskButton = document.getElementById('show-add-task');