87 lines
2.6 KiB
CSS
87 lines
2.6 KiB
CSS
|
:root {
|
||
|
|
color-scheme: dark;
|
||
|
|
--bg-base: #0d0d0f;
|
||
|
|
--bg-page: var(--bg-base);
|
||
|
|
--bg-shell: #0d0d0f;
|
||
|
|
--bg-surface: #151719;
|
||
|
|
--bg-panel: #151719;
|
||
|
|
--bg-elevated: #181b1d;
|
||
|
|
--bg-elevated-rgb: 24, 27, 29;
|
||
|
|
--bg-inset: #101214;
|
||
|
|
--bg-hover: #202527;
|
||
|
|
--bg-active: #243129;
|
||
|
|
--border-weak: #242a2c;
|
||
|
|
--border-subtle: #2a3032;
|
||
|
|
--border-default: #394044;
|
||
|
|
--border-accent: #00ff88;
|
||
|
|
--fg-body: #f3f5f2;
|
||
|
|
--fg-muted: #aeb8b1;
|
||
|
|
--fg-soft: #7e8983;
|
||
|
|
--fg-dim: #5f6a64;
|
||
|
|
--accent: #00ff88;
|
||
|
|
--accent-rgb: 0, 255, 136;
|
||
|
|
--accent-dim: #00d874;
|
||
|
|
--accent-hover: #58ffac;
|
||
|
|
--accent-muted: #183527;
|
||
|
|
--accent-glow: none;
|
||
|
|
--accent-cyan: #7be7ff;
|
||
|
|
--accent-gold: #d9f99d;
|
||
|
|
--success: #26d06e;
|
||
|
|
--warning: #f3aa26;
|
||
|
|
--error: #ff5a5f;
|
||
|
|
--radius-xs: 8px;
|
||
|
|
--radius-sm: 10px;
|
||
|
|
--radius-md: 14px;
|
||
|
|
--radius-lg: 18px;
|
||
|
|
--shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||
|
|
--shadow-tight: 0 0 0 1px rgba(255, 255, 255, 0.04);
|
||
|
|
--shadow-glow: 0 0 26px rgba(45, 212, 191, 0.18);
|
||
|
|
|
||
|
|
/* Motion tokens */
|
||
|
|
--transition-fast: 140ms ease;
|
||
|
|
--transition-base: 200ms ease;
|
||
|
|
--transition-slow: 320ms ease;
|
||
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
|
--ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
|
||
|
|
|
||
|
|
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||
|
|
"Microsoft YaHei", sans-serif;
|
||
|
|
|
||
|
|
/* Semantic aliases used by the layered stylesheet structure. */
|
||
|
|
--surface-canvas: var(--bg-base);
|
||
|
|
--surface-shell: var(--bg-shell);
|
||
|
|
--surface-panel: var(--bg-panel);
|
||
|
|
--surface-elevated: var(--bg-elevated);
|
||
|
|
--surface-muted: var(--bg-inset);
|
||
|
|
--surface-hover: var(--bg-hover);
|
||
|
|
--text-primary: var(--fg-body);
|
||
|
|
--text-muted: var(--fg-muted);
|
||
|
|
--text-subtle: var(--fg-soft);
|
||
|
|
--text-disabled: var(--fg-dim);
|
||
|
|
--border-soft: var(--border-weak);
|
||
|
|
--border-normal: var(--border-subtle);
|
||
|
|
--border-strong: var(--border-default);
|
||
|
|
--radius-control: var(--radius-sm);
|
||
|
|
--radius-panel: var(--radius-lg);
|
||
|
|
--shadow-surface: var(--shadow-tight);
|
||
|
|
--shadow-elevated: var(--shadow-panel);
|
||
|
|
--accent-primary: var(--accent);
|
||
|
|
--accent-primary-rgb: var(--accent-rgb);
|
||
|
|
|
||
|
|
/* Legacy aliases used by the first web preview. */
|
||
|
|
--page-bg: var(--bg-base);
|
||
|
|
--page-bg-soft: var(--bg-shell);
|
||
|
|
--surface: var(--bg-panel);
|
||
|
|
--surface-strong: var(--bg-elevated);
|
||
|
|
--line: var(--border-subtle);
|
||
|
|
--line-strong: var(--border-default);
|
||
|
|
--text: var(--fg-body);
|
||
|
|
--text-soft: var(--fg-soft);
|
||
|
|
--cyan: var(--accent-cyan);
|
||
|
|
--cyan-strong: #5eead4;
|
||
|
|
--gold: var(--accent-gold);
|
||
|
|
--green: var(--success);
|
||
|
|
--danger: var(--error);
|
||
|
|
--shadow-soft: var(--shadow-panel);
|
||
|
|
}
|