docs: add Animal Crossing theme design spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/superpowers/specs/2026-05-18-animal-crossing-theme-design.md

@@ -0,0 +1,93 @@
+# Animal Crossing Theme — Sunny Meadow
+
+**Date:** 2026-05-18  
+**Status:** Approved
+
+## Summary
+
+Add a fifth design theme ("animal-crossing") to the hyyzhome IoT learning portal. The theme captures the warm, cozy Animal Crossing aesthetic: leaf greens, cream backgrounds in light mode, and deep forest tones in dark mode.
+
+Reference: https://guokaigdg.github.io/animal-island-ui/
+
+## Behavior
+
+- Supports both light and dark modes (no forced mode, unlike Terminal/Cyberpunk)
+- Default: follows the user's current light/dark preference
+- Slug: `"animal-crossing"` (kebab-case, consistent with `"material-you"`)
+
+## Color Palette
+
+### Light mode (Sunny Island Day)
+
+| Token | Value | Role |
+|---|---|---|
+| `--accent` | `#6dbc7e` | Primary leaf green |
+| `--accent-rgb` | `109, 188, 126` | |
+| `--accent-2` | `#5aad6d` | Darker green |
+| `--accent-3` | `#4a9e5d` | Deepest green |
+| `--accent-secondary-rgb` | `244, 200, 66` | Warm yellow for texture |
+| `--page-gradient` | Warm cream `#fdf6e3` base with soft radial blobs | Background |
+| `--page-texture` | Soft radial green/yellow gradients | Overlay layer |
+| `--title-gradient` | `#6dbc7e` → `#5aad6d` → `#f4c842` | Title text fill |
+| `--control-bg` | `rgba(255, 252, 240, 0.82)` | Button/dropdown backgrounds |
+| `--control-border` | `rgba(109, 188, 126, 0.35)` | Button borders |
+| `--control-inset` | `rgba(255, 255, 255, 0.85)` | Inner highlight |
+| `--control-fg` | `#5c4824` | Warm brown text |
+| Card bg | `rgba(255, 252, 240, 0.85)` | Creamy white |
+| Card border | `rgba(109, 188, 126, 0.25)` | Soft green border |
+| Body text | `#5c4824` | Warm brown |
+| Muted text (card p) | `#7a6040` | Lighter warm brown |
+
+### Dark mode (Night on the Island)
+
+| Token | Value | Role |
+|---|---|---|
+| `--accent` | `#9ed98a` | Soft lime |
+| `--accent-rgb` | `158, 217, 138` | |
+| `--accent-2` | `#86cb72` | |
+| `--accent-3` | `#6dbc5e` | |
+| `--accent-secondary-rgb` | `245, 210, 90` | Lantern yellow |
+| `--page-gradient` | Deep forest `#1e2d1e` solid | Background |
+| `--page-texture` | Subtle radial lime/yellow glows | Overlay layer |
+| `--title-gradient` | `#9ed98a` → `#86cb72` → `#f5d25a` | Title text fill |
+| `--control-bg` | `rgba(25, 40, 25, 0.82)` | Dark forest controls |
+| `--control-border` | `rgba(158, 217, 138, 0.25)` | |
+| `--control-inset` | `rgba(255, 255, 255, 0.04)` | |
+| `--control-fg` | `#e8f4d8` | Off-white |
+| Card bg | `rgba(30, 48, 30, 0.82)` | Dark forest green |
+| Card border | `rgba(158, 217, 138, 0.18)` | |
+| Body text | `#e8f4d8` | Off-white |
+| Muted text | `#b0c8a0` | Muted sage |
+
+## Visual Style
+
+- **Border radius:** `16px` on cards (vs Fluent's `12px`), `14px` on controls — slightly softer
+- **Hover:** gentle `translateY(-2px)` lift + green glow shadow matching accent
+- **Backdrop filter:** same acrylic blur as Fluent (20px blur, 180% saturate)
+- **No special font override** — system sans-serif for legibility
+- **No animations** — keeps the theme calm and lightweight
+
+## Files Changed
+
+| File | Change |
+|---|---|
+| `theme.js` | Add `"animal-crossing"` to `DESIGN_THEMES` array |
+| `style.css` | Add light + dark CSS variable blocks; card/hover overrides scoped to `[data-design-theme="animal-crossing"]` |
+| `i18n.js` | Add label in all 11 language variants in `DESIGN_THEME_LABELS` |
+| `index.html` | Add `<li role="option" data-value="animal-crossing" aria-selected="false">` |
+
+## Labels by Language
+
+| Language | Label |
+|---|---|
+| zh-Hans | 动森 |
+| zh-Hant | 動森 |
+| en | Animal Crossing |
+| ja | どうぶつの森 |
+| ko | 동물의 숲 |
+| wenyan | 森友 |
+| mars | 动↗森★ |
+| garbled | ä◼▤è |
+| bin | 01010101 |
+| meow | 喵喵喵喵 |
+| emoji | 🌿 |