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">

components/Footer.js

@@ -2,14 +2,14 @@ import Link from 'next/link';
 
 export default function Footer() {
   return (
-    <footer className="border-t border-border/60 mt-20">
-      <div className="container-wide py-10 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-mute">
+    <footer className="border-t-soft mt-20">
+      <div className="container-wide py-10 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm mute">
         <div>
           © {new Date().getFullYear()} ZeroPost — генерируется ИИ, читается людьми
         </div>
         <div className="flex items-center gap-4">
-          <Link href="/about" className="hover:text-white transition-colors">О проекте</Link>
-          <a href="https://app.zeropost.ru" className="hover:text-white transition-colors">Сервис</a>
+          <Link href="/about" className="hover:ink transition-colors">О проекте</Link>
+          <a href="https://app.zeropost.ru" className="hover:ink transition-colors">Сервис</a>
         </div>
       </div>
     </footer>

components/Header.js

@@ -1,22 +1,26 @@
 import Link from 'next/link';
-import { Sparkles, Github } from 'lucide-react';
+import { Sparkles } from 'lucide-react';
+import ThemeToggle from './ThemeToggle';
 
 export default function Header() {
   return (
-    <header className="border-b border-border/60 sticky top-0 z-20 bg-bg/85 backdrop-blur-md">
+    <header className="sticky top-0 z-20 border-b-soft" style={{ background: 'rgb(var(--bg) / 0.85)', backdropFilter: 'saturate(180%) blur(12px)' }}>
       <div className="container-wide flex items-center justify-between py-4">
         <Link href="/" className="flex items-center gap-2 group">
-          <div className="w-8 h-8 rounded-lg bg-accent/15 flex items-center justify-center group-hover:bg-accent/25 transition-colors">
-            <Sparkles className="w-4 h-4 text-accent" />
+          <div className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" style={{ background: 'rgb(var(--accent) / 0.12)' }}>
+            <Sparkles className="w-4 h-4 accent" />
           </div>
-          <span className="font-bold text-lg tracking-tight">ZeroPost</span>
+          <span className="font-bold text-lg tracking-tight ink">ZeroPost</span>
         </Link>
-        <nav className="flex items-center gap-1 sm:gap-4 text-sm">
-          <Link href="/" className="btn-ghost text-sm py-1.5">Статьи</Link>
-          <Link href="/about" className="btn-ghost text-sm py-1.5">О проекте</Link>
-          <a href="https://app.zeropost.ru" className="btn-primary text-sm py-1.5">
-            Открыть кабинет
+        <nav className="flex items-center gap-1 sm:gap-2 text-sm">
+          <Link href="/" className="btn btn-ghost text-sm py-1.5">Статьи</Link>
+          <Link href="/about" className="btn btn-ghost text-sm py-1.5">О проекте</Link>
+          <a href="https://app.zeropost.ru" className="btn btn-primary text-sm py-1.5 ml-1">
+            Кабинет
           </a>
+          <div className="ml-1">
+            <ThemeToggle />
+          </div>
         </nav>
       </div>
     </header>

components/ThemeToggle.js

@@ -0,0 +1,36 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const isDark = document.documentElement.classList.contains('dark');
+    setTheme(isDark ? 'dark' : 'light');
+  }, []);
+
+  function toggle() {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    if (next === 'dark') document.documentElement.classList.add('dark');
+    else document.documentElement.classList.remove('dark');
+    try { localStorage.setItem('theme', next); } catch {}
+  }
+
+  // плейсхолдер до маунта, чтобы кнопка не прыгала
+  if (!mounted) return <div className="w-9 h-9" aria-hidden />;
+
+  return (
+    <button
+      onClick={toggle}
+      className="w-9 h-9 inline-flex items-center justify-center rounded-lg mute hover:ink hover:surface-2 transition-colors"
+      title={theme === 'dark' ? 'Включить светлую тему' : 'Включить тёмную тему'}
+      aria-label="Переключить тему"
+    >
+      {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+    </button>
+  );
+}