Fix design system compliance: CSS variables, accessibility, and theme system

Core CSS improvements:
- Add --surface-rgb, --type-* (tech, life, quote, link, photo) custom properties
- Add --type-* semantic color classes for article badges
- Convert article badges from inline styles to CSS variable system
- Add prefers-color-scheme light fallback for no-JS users
- Add prefers-reduced-motion support to respect user accessibility settings
- Replace *:focus with *:focus-visible (keyboard-only outlines)
- Add clamp() fluid typography for hero-title and section-title
- Refactor container rules to mobile-first with 1060px breakpoint

Theme & Icon fixes:
- Fix theme toggle icon display with Alpine.js (was broken with Tailwind dark: classes)
- Add aria-hidden="true" to icon elements
- Update header with proper ARIA attributes on menu toggle

Accessibility enhancements:
- Add skip-to-main-content link in baseof.html
- Update hamburger menu with aria-expanded, aria-controls, aria-hidden
- Implement focus trap (Tab loops) within mobile menu
- Return focus to trigger button on menu close
- Add menu open/close state management with proper ARIA

Semantic HTML:
- Wrap article pages in <article> element (articles/single.html, _default/single.html)
- Fix quote article to use --type-quote border color instead of generic accent

Image optimization:
- Add loading="lazy" to profile image in index.html
- Add loading="lazy" to featured image in photo.html

Template fixes:
- Remove broken os.Getenv "THEME" runtime check from article-list-item.html
- Replace inline color styles with semantic .type-* classes
- Add 1060px lg: breakpoint to tailwind.config.js

i18n updates:
- Add skipToContent translations (en, it)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2 files changed, 231 insertions, 40 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index c66092b..2b8cbde 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -7,6 +7,7 @@
   --bg: #060b10;
   --bg2: #0c1520;
   --surface: #101e2d;
+  --surface-rgb: 16, 30, 45;
   --border: #182840;
   --accent: #a855f7;
   --accent2: #00ff88;
@@ -14,6 +15,12 @@
   --text: #c4d6e8;
   --text-dim: #7a9bb8;
   --muted: #304860;
+  /* Article type colors - dark */
+  --type-tech: #a855f7;
+  --type-life: #f59e0b;
+  --type-quote: #00ff88;
+  --type-link: #38bdf8;
+  --type-photo: #ec4899;
 }
 
 /* Light theme overrides */
@@ -21,6 +28,7 @@ html.theme-light {
   --bg: #ffffff;
   --bg2: #f8f9fa;
   --surface: #f0f3f7;
+  --surface-rgb: 240, 243, 247;
   --border: #d9dfe8;
   --accent: #9333ea;
   --accent2: #10b981;
@@ -28,6 +36,34 @@ html.theme-light {
   --text: #1f2937;
   --text-dim: #374151;
   --muted: #d1d5db;
+  /* Article type colors - light */
+  --type-tech: #7c3aed;
+  --type-life: #d97706;
+  --type-quote: #008f5a;
+  --type-link: #0284c7;
+  --type-photo: #be185d;
+}
+
+/* No-JS fallback: prefers-color-scheme light */
+@media (prefers-color-scheme: light) {
+  html:not(.theme-dark) {
+    --bg: #ffffff;
+    --bg2: #f8f9fa;
+    --surface: #f0f3f7;
+    --surface-rgb: 240, 243, 247;
+    --border: #d9dfe8;
+    --accent: #9333ea;
+    --accent2: #10b981;
+    --accent-glow: rgba(147, 51, 234, 0.1);
+    --text: #1f2937;
+    --text-dim: #374151;
+    --muted: #d1d5db;
+    --type-tech: #7c3aed;
+    --type-life: #d97706;
+    --type-quote: #008f5a;
+    --type-link: #0284c7;
+    --type-photo: #be185d;
+  }
 }
 
 @layer base {
@@ -66,19 +102,15 @@ html.theme-light {
   }
 
   pre {
-    background-color: rgba(16, 30, 45, 0.8);
+    background-color: rgba(var(--surface-rgb), 0.8);
     @apply p-4 rounded border border-border overflow-x-auto;
   }
 
-  html.theme-light pre {
-    background-color: rgba(240, 243, 247, 0.8);
-  }
-
   pre code {
     @apply bg-transparent border-0 p-0 text-text;
   }
 
-  *:focus {
+  *:focus-visible {
     @apply ring-2 ring-accent ring-offset-2;
     ring-offset-color: var(--bg);
   }
@@ -144,6 +176,41 @@ html.theme-light {
   .glow-accent {
     box-shadow: 0 0 20px var(--accent-glow);
   }
+
+  /* Article type badge styles */
+  .type-tech {
+    color: var(--type-tech);
+    background-color: rgba(168, 85, 247, 0.1);
+  }
+
+  .type-life {
+    color: var(--type-life);
+    background-color: rgba(245, 158, 11, 0.1);
+  }
+
+  .type-quote {
+    color: var(--type-quote);
+    background-color: rgba(0, 255, 136, 0.1);
+  }
+
+  .type-link {
+    color: var(--type-link);
+    background-color: rgba(56, 189, 248, 0.1);
+  }
+
+  .type-photo {
+    color: var(--type-photo);
+    background-color: rgba(236, 72, 153, 0.1);
+  }
+
+  /* Hero typography with fluid sizing */
+  .hero-title {
+    font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
+  }
+
+  .section-title {
+    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
+  }
 }
 
 /* Prose overrides for light theme */
@@ -194,15 +261,28 @@ html.theme-light .prose-invert blockquote {
   border-left-color: var(--accent);
 }
 
-/* Responsive utilities */
-@media (max-width: 768px) {
-  .sm\:container {
-    @apply max-w-full px-4;
+/* Responsive container utilities - mobile-first */
+.container {
+  @apply max-w-full px-4;
+}
+
+@media (min-width: 768px) {
+  .container {
+    @apply max-w-4xl px-6;
+  }
+}
+
+@media (min-width: 1060px) {
+  .container {
+    @apply max-w-5xl px-8;
   }
 }
 
-@media (min-width: 769px) {
-  .md\:container {
-    @apply max-w-4xl;
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
 }
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 3ab93b7..858df86 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -631,7 +631,7 @@ code {
 }
 
 pre {
-  background-color: rgba(16, 30, 45, 0.8);
+  background-color: rgba(var(--surface-rgb), 0.8);
   overflow-x: auto;
   border-radius: 0.25rem;
   border-width: 1px;
@@ -639,10 +639,6 @@ pre {
   padding: 1rem;
 }
 
-html.theme-light pre {
-  background-color: rgba(240, 243, 247, 0.8);
-}
-
 pre code {
   border-width: 0px;
   background-color: transparent;
@@ -650,7 +646,7 @@ pre code {
   color: var(--text);
 }
 
-*:focus {
+*:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
@@ -684,9 +680,9 @@ button,
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1060px) {
   .container {
-    max-width: 1024px;
+    max-width: 1060px;
   }
 }
 
@@ -1268,6 +1264,22 @@ button,
 
 /* Glow effect utility */
 
+/* Article type badge styles */
+
+/* Hero typography with fluid sizing */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1556,6 +1568,10 @@ button,
   border-top-width: 1px;
 }
 
+.border-\[--type-quote\] {
+  border-color: var(--type-quote);
+}
+
 .border-accent {
   border-color: var(--accent);
 }
@@ -1812,6 +1828,7 @@ button,
   --bg: #060b10;
   --bg2: #0c1520;
   --surface: #101e2d;
+  --surface-rgb: 16, 30, 45;
   --border: #182840;
   --accent: #a855f7;
   --accent2: #00ff88;
@@ -1819,6 +1836,12 @@ button,
   --text: #c4d6e8;
   --text-dim: #7a9bb8;
   --muted: #304860;
+  /* Article type colors - dark */
+  --type-tech: #a855f7;
+  --type-life: #f59e0b;
+  --type-quote: #00ff88;
+  --type-link: #38bdf8;
+  --type-photo: #ec4899;
 }
 
 /* Light theme overrides */
@@ -1827,6 +1850,7 @@ html.theme-light {
   --bg: #ffffff;
   --bg2: #f8f9fa;
   --surface: #f0f3f7;
+  --surface-rgb: 240, 243, 247;
   --border: #d9dfe8;
   --accent: #9333ea;
   --accent2: #10b981;
@@ -1834,6 +1858,35 @@ html.theme-light {
   --text: #1f2937;
   --text-dim: #374151;
   --muted: #d1d5db;
+  /* Article type colors - light */
+  --type-tech: #7c3aed;
+  --type-life: #d97706;
+  --type-quote: #008f5a;
+  --type-link: #0284c7;
+  --type-photo: #be185d;
+}
+
+/* No-JS fallback: prefers-color-scheme light */
+
+@media (prefers-color-scheme: light) {
+  html:not(.theme-dark) {
+    --bg: #ffffff;
+    --bg2: #f8f9fa;
+    --surface: #f0f3f7;
+    --surface-rgb: 240, 243, 247;
+    --border: #d9dfe8;
+    --accent: #9333ea;
+    --accent2: #10b981;
+    --accent-glow: rgba(147, 51, 234, 0.1);
+    --text: #1f2937;
+    --text-dim: #374151;
+    --muted: #d1d5db;
+    --type-tech: #7c3aed;
+    --type-life: #d97706;
+    --type-quote: #008f5a;
+    --type-link: #0284c7;
+    --type-photo: #be185d;
+  }
 }
 
 /* Prose overrides for light theme */
@@ -1885,19 +1938,37 @@ html.theme-light .prose-invert blockquote {
   border-left-color: var(--accent);
 }
 
-/* Responsive utilities */
+/* Responsive container utilities - mobile-first */
 
-@media (max-width: 768px) {
-  .sm\:container {
-    max-width: 100%;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
+.container {
+  max-width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
-@media (min-width: 769px) {
-  .md\:container {
+@media (min-width: 768px) {
+  .container {
     max-width: 56rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1060px) {
+  .container {
+    max-width: 64rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+/* Respect user's motion preferences */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
 }
 
@@ -1929,10 +2000,60 @@ html.theme-light .prose-invert blockquote {
   opacity: 0.9;
 }
 
+.focus\:not-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+.focus\:fixed:focus {
+  position: fixed;
+}
+
+.focus\:left-4:focus {
+  left: 1rem;
+}
+
+.focus\:top-4:focus {
+  top: 1rem;
+}
+
+.focus\:z-50:focus {
+  z-index: 50;
+}
+
+.focus\:rounded:focus {
+  border-radius: 0.25rem;
+}
+
 .focus\:border-accent:focus {
   border-color: var(--accent);
 }
 
+.focus\:bg-accent:focus {
+  background-color: var(--accent);
+}
+
+.focus\:px-4:focus {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.focus\:py-2:focus {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2016,13 +2137,3 @@ html.theme-light .prose-invert blockquote {
     line-height: 1;
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  .dark\:block {
-    display: block;
-  }
-
-  .dark\:hidden {
-    display: none;
-  }
-}