feat(ui): semantic light/dark tokens, ThemeProvider with FOUC guard, token-restyle Toaster/Cover

frontend/src/index.css

@@ -1,4 +1,74 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.65rem;
+  --background: oklch(0.985 0.001 80);
+  --foreground: oklch(0.22 0.01 70);
+  --card: oklch(0.995 0 0);
+  --card-foreground: oklch(0.22 0.01 70);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.22 0.01 70);
+  --primary: oklch(0.25 0.012 70);
+  --primary-foreground: oklch(0.98 0.002 80);
+  --secondary: oklch(0.95 0.003 80);
+  --secondary-foreground: oklch(0.32 0.01 70);
+  --muted: oklch(0.95 0.003 80);
+  --muted-foreground: oklch(0.55 0.008 70);
+  --accent: oklch(0.68 0.16 46);
+  --accent-foreground: oklch(0.985 0.002 80);
+  --destructive: oklch(0.58 0.21 27);
+  --border: oklch(0.91 0.004 80);
+  --input: oklch(0.91 0.004 80);
+  --ring: oklch(0.62 0.01 70);
+}
+.dark {
+  --background: oklch(0.19 0.006 80);
+  --foreground: oklch(0.95 0.003 80);
+  --card: oklch(0.23 0.006 80);
+  --card-foreground: oklch(0.95 0.003 80);
+  --popover: oklch(0.23 0.006 80);
+  --popover-foreground: oklch(0.95 0.003 80);
+  --primary: oklch(0.95 0.003 80);
+  --primary-foreground: oklch(0.22 0.01 70);
+  --secondary: oklch(0.28 0.006 80);
+  --secondary-foreground: oklch(0.95 0.003 80);
+  --muted: oklch(0.28 0.006 80);
+  --muted-foreground: oklch(0.68 0.006 80);
+  --accent: oklch(0.7 0.16 46);
+  --accent-foreground: oklch(0.19 0.006 80);
+  --destructive: oklch(0.65 0.19 25);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.6 0.01 70);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
 
 html,
 body,
@@ -6,10 +76,23 @@ body,
   height: 100%;
 }
 body {
-  @apply bg-stone-950 text-stone-100 antialiased;
-  /* 顶部一抹极淡的琥珀氛围光,避免大面积纯黑的"朴素感" */
-  background-image: radial-gradient(60rem 28rem at 50% -8rem, rgb(217 119 6 / 0.07), transparent 70%);
-  background-repeat: no-repeat;
+  @apply bg-background text-foreground antialiased;
+  color-scheme: light;
+}
+.dark body {
+  color-scheme: dark;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  @apply rounded-full border-2 border-transparent bg-clip-padding;
+  background-color: color-mix(in oklab, var(--foreground) 22%, transparent);
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in oklab, var(--foreground) 34%, transparent);
 }
 
 /* 入场:卡片/区块轻微上浮淡入(列表 stagger 用 style.animationDelay) */
@@ -18,16 +101,6 @@ body {
   to { opacity: 1; transform: none; }
 }
 .fx-rise { animation: fx-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-::-webkit-scrollbar-thumb {
-  @apply rounded-full border-2 border-transparent bg-clip-padding bg-stone-700/70;
-}
-::-webkit-scrollbar-thumb:hover {
-  @apply bg-stone-600;
-}
 
 /* 阅读页主题:纸/米/夜,文本类阅读器共用 —— 见 lib/readerPrefs.ts */
 [data-rd="paper"] { --rd-bg: #faf8f4; --rd-fg: #292524; --rd-link: #9a3412; }