test: Add new background patterns for light and dark themes

**TESTING** - These patterns can be easily reverted or modified

Light Theme (Woven Fabric Pattern):
- Subtle gray crosshatch pattern
- Multiple gradients creating woven texture
- Professional and clean appearance

Dark Theme (Diagonal Grid with Green Glow):
- 45° and -45° diagonal lines
- Green glow (rgba(0, 255, 128, 0.1))
- Cyberpunk/tech aesthetic
- 40px grid spacing

Implementation:
- Added --page-bg-pattern CSS variables to color-theme.css
- Applied patterns via body background-image in _reset.css
- OLD pattern commented out and preserved for easy restoration
- Patterns work with light, dark, and auto themes

Files changed:
- static/css/color-theme.css: Added pattern variables
- static/css/01-foundation/_reset.css: Applied patterns to body

To revert: Uncomment old pattern and remove --page-bg-pattern usage

static/css/01-foundation/_reset.css

@@ -12,12 +12,18 @@
 /* Body base */
 body {
   background-color: var(--page-bg);
-  background-image:
+
+  /* OLD PATTERN - Keep for reference (can be restored anytime) */
+  /* background-image:
     linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
     linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
     linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
     linear-gradient(180deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
-  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
+  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; */
+
+  /* NEW TEST PATTERNS - Theme-specific (woven fabric for light, diagonal grid for dark) */
+  background-image: var(--page-bg-pattern);
+  background-size: 40px 40px; /* For dark theme diagonal grid */
   background-attachment: fixed;
   overflow-x: auto;
 }