feat: светлая тема как основная + переключатель тем

- CSS-переменные --bg, --surface, --ink, --mute, --accent для обеих тем
- darkMode: 'class' в Tailwind config
- ThemeToggle компонент с Sun/Moon, сохраняет выбор в localStorage
- Inline-скрипт в layout.js защищает от FOUC (FlashOfUnstyledContent)
- Авто-определение по prefers-color-scheme как fallback
- not-found.js: красивая 404 страница вместо дефолтной Next
- Обновлены все компоненты и страницы — Header, Footer, ArticleCard, page.js, blog, tag, about

components/ArticleCard.js

@@ -7,22 +7,23 @@ export default function ArticleCard({ article, featured = false }) {
     return (
       <Link
         href={`/blog/${article.slug}`}
-        className="article-card block group p-8 sm:p-10 border-accent/30 hover:border-accent"
+        className="article-card block group p-8 sm:p-10"
+        style={{ borderColor: 'rgb(var(--accent) / 0.3)' }}
       >
         <div className="flex flex-wrap items-center gap-2 mb-4">
           {(article.tags || []).slice(0, 3).map(t => (
             <span key={t} className="tag">#{t}</span>
           ))}
         </div>
-        <h2 className="text-2xl sm:text-3xl font-bold mb-3 group-hover:text-accent2 transition-colors leading-tight">
+        <h2 className="text-2xl sm:text-3xl font-bold mb-3 leading-tight ink group-hover:accent transition-colors">
           {article.title}
         </h2>
         {article.excerpt && (
-          <p className="text-mute text-base sm:text-lg leading-relaxed line-clamp-3 mb-4">
+          <p className="mute text-base sm:text-lg leading-relaxed line-clamp-3 mb-4">
             {article.excerpt}
           </p>
         )}
-        <div className="flex items-center gap-4 text-xs text-mute">
+        <div className="flex items-center gap-4 text-xs mute">
           <span>{formatDate(article.published_at)}</span>
           {article.reading_time && (
             <span className="inline-flex items-center gap-1">
@@ -41,13 +42,13 @@ export default function ArticleCard({ article, featured = false }) {
           <span key={t} className="tag">#{t}</span>
         ))}
       </div>
-      <h3 className="text-lg font-semibold mb-2 group-hover:text-accent2 transition-colors leading-snug">
+      <h3 className="text-lg font-semibold mb-2 ink group-hover:accent transition-colors leading-snug">
         {article.title}
       </h3>
       {article.excerpt && (
-        <p className="text-mute text-sm line-clamp-3 mb-4">{article.excerpt}</p>
+        <p className="mute text-sm line-clamp-3 mb-4">{article.excerpt}</p>
       )}
-      <div className="flex items-center gap-3 text-xs text-mute">
+      <div className="flex items-center gap-3 text-xs mute">
         <span>{formatDate(article.published_at)}</span>
         {article.reading_time && (
           <span className="inline-flex items-center gap-1">