docs(css): document dual-source CSS variable architecture

Explain why --destructive and other variables exist in both globals.css
and themes.css: globals.css provides neutral fallback for "system" theme
and pre-hydration, while themes.css overrides via higher specificity.

Closes #153

Author: ryota-murakami

src/styles/globals.css

@@ -1,8 +1,19 @@
 /**
  * Global Styles
  *
- * Define CSS Variables and global styles
- * Themes are managed with CSS Variables and can be switched from JavaScript
+ * CSS Variable Architecture (dual-source design):
+ *
+ * 1. :root / .dark (this file)
+ *    shadcn/ui neutral defaults — achromatic, no hue.
+ *    Active when "system" theme is selected (no data-theme attribute).
+ *    Also serves as fallback before client hydration.
+ *
+ * 2. html[data-theme='xxx'] (themes.css)
+ *    14 named themes with personality — warm/cool tinted OKLCH values.
+ *    Higher specificity (0,1,1) always overrides :root (0,1,0) when active.
+ *
+ * Some variables (e.g. --destructive) share the same value in both sources.
+ * This is intentional — do NOT remove either definition.
  */
 /*---break---
  */

src/styles/themes.css

@@ -1,11 +1,18 @@
 /**
  * Theme CSS Variables (14 Themes)
  *
- * PRD 2.2 Design Tokens (14 Themes)
- * OKLCH-based color system with WCAG AA contrast compliance
+ * PRD 2.2 Design Tokens — OKLCH-based color system with WCAG AA contrast compliance.
  *
- * Light Themes: Default / Sunrise / Sandstone / Mint / Sky / Lavender / Rose
- * Dark Themes: Dark / Midnight / Graphite / Forest / Ocean / Plum / Rust
+ * Light: Default / Sunrise / Sandstone / Mint / Sky / Lavender / Rose
+ * Dark:  Dark / Midnight / Graphite / Forest / Ocean / Plum / Rust
+ *
+ * These selectors (html[data-theme='xxx']) override the neutral :root/.dark
+ * defaults in globals.css when a named theme is active.
+ * When "system" theme is selected, no data-theme is set and globals.css
+ * :root/.dark values are used instead (see globals.css header for details).
+ *
+ * Some variables (e.g. --destructive) intentionally share the same value
+ * as globals.css. Update BOTH files when changing shared values.
  */
 
 /* ============================================