/* 2026-05-15 P3-2: design tokens — single source of truth. * * Owner brand: A + C mashup (mono base + blue/cyan accent + green status). * Themes: dark (default) / light / high-contrast / system (follows OS). * Activated by setting `data-theme="dark|light|hc"` on . * * Loaded BEFORE app.css so per-page rules can shadow. app.css's existing * --bg / --ink / --line / --muted variables are overridden here. */ :root, html[data-theme="dark"] { /* === Brand === */ --brand-name: "LocalAI Control"; --brand-zh: "本地 AI 總控台"; --brand-blue: #3b82f6; --brand-blue-hover: #2563eb; --brand-cyan: #06b6d4; --brand-green: #22c55e; /* status / online dot */ --brand-amber: #eab308; /* warning */ --brand-red: #ef4444; /* error */ /* === Surface scale === */ --bg: #0b1117; /* page base (alias for backcompat) */ --bg-1: #000000; /* deepest — for body / outer chrome */ --bg-2: #0a0a0a; /* primary panel */ --bg-3: #161616; /* raised card / hover */ --bg-4: #1e1e1e; /* input field / nested card */ --panel: var(--bg-2); /* === Borders === */ --line: #262626; --line-1: #1a1a1a; /* subtle separator */ --line-2: #262626; /* visible border */ --line-3: #404040; /* strong / focus */ --btn-bg: #1e1e1e; /* === Ink (text) === */ --ink: #e5e7eb; /* alias for backcompat */ --ink-1: #ffffff; /* highest contrast (h1) */ --ink-2: #e5e5e5; /* body */ --ink-3: #a3a3a3; /* secondary */ --ink-4: #737373; /* muted */ --muted: var(--ink-4); /* === Semantic state === */ --st-ok: var(--brand-green); --st-warn: var(--brand-amber); --st-bad: var(--brand-red); --st-info: var(--brand-blue); /* === Spacing scale (4-px base, 1.5x progression) === */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* === Radius === */ --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* === Typography === */ --font-sans: ui-sans-serif, system-ui, "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; --font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-2xl: 28px; --line-height-tight: 1.3; --line-height-base: 1.55; --line-height-loose: 1.75; /* === Shadows === */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.6); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 10px 40px rgba(0,0,0,0.5); --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.35); /* === Motion === */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 400ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); /* === Layout === */ --rail-width: 220px; --topbar-height: 52px; --container-max: 1280px; } /* === Light theme === */ html[data-theme="light"] { --bg: #ffffff; --bg-1: #ffffff; --bg-2: #fafafa; --bg-3: #f5f5f5; --bg-4: #ededed; --panel: var(--bg-2); --line: #e5e5e5; --line-1: #f0f0f0; --line-2: #e5e5e5; --line-3: #d4d4d4; --btn-bg: #f5f5f5; --ink: #171717; --ink-1: #000000; --ink-2: #171717; --ink-3: #525252; --ink-4: #737373; --muted: var(--ink-4); --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 10px 40px rgba(0,0,0,0.12); } /* === High-contrast theme (a11y) === */ html[data-theme="hc"] { --bg: #000000; --bg-1: #000000; --bg-2: #000000; --bg-3: #000000; --bg-4: #000000; --panel: #000000; --line: #ffffff; --line-1: #808080; --line-2: #ffffff; --line-3: #ffff00; --btn-bg: #000000; --ink: #ffffff; --ink-1: #ffffff; --ink-2: #ffffff; --ink-3: #ffff00; --ink-4: #ffff00; --muted: #ffff00; --brand-blue: #00ccff; --brand-green: #00ff00; --brand-amber: #ffff00; --brand-red: #ff4040; --st-ok: #00ff00; --st-warn: #ffff00; --st-bad: #ff4040; --st-info: #00ccff; --shadow-focus: 0 0 0 3px #ffff00; } /* === System theme (auto by prefers-color-scheme) === */ @media (prefers-color-scheme: light) { html[data-theme="system"] { --bg: #ffffff; --bg-1: #ffffff; --bg-2: #fafafa; --bg-3: #f5f5f5; --bg-4: #ededed; --panel: var(--bg-2); --line: #e5e5e5; --line-1: #f0f0f0; --line-2: #e5e5e5; --line-3: #d4d4d4; --btn-bg: #f5f5f5; --ink: #171717; --ink-1: #000000; --ink-2: #171717; --ink-3: #525252; --ink-4: #737373; --muted: var(--ink-4); } } /* === Honor user motion preference === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } /* === Focus ring (every interactive surface) === */ :focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: var(--radius-xs); }