/* ============================================================ LUTONG STUDIO · Design Tokens 全局设计变量：颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效 修改主题颜色只需调整本文件中的 --color-* 变量。 ============================================================ */ :root { /* ---------- 颜色：背景层 ---------- */ --color-bg: #07070A; /* 主背景：近黑 */ --color-bg-soft: #0A0B0F; /* 次级背景 */ --color-surface: #0E1016; /* 卡片/表面 */ --color-surface-hover: #141720; /* 悬停表面 */ /* ---------- 颜色：描边 ---------- */ --color-border: rgba(255, 255, 255, 0.10); --color-border-hover: rgba(255, 255, 255, 0.22); /* ---------- 颜色：文字 ---------- */ --color-text: #F5F7FA; /* 主文字 */ --color-text-secondary: #A4A9B5;/* 次要文字 */ --color-text-muted: #717784; /* 弱化文字 */ /* ---------- 颜色：主题强调色 ---------- */ --color-accent: #7C5CFF; /* 主强调：紫 */ --color-accent-blue: #557CFF; /* 蓝 */ --color-accent-cyan: #39D8FF; /* 青 */ --color-white: #FFFFFF; /* ---------- 渐变（用于标题/光效/按钮） ---------- */ --gradient-accent: linear-gradient(120deg, #7C5CFF 0%, #557CFF 55%, #39D8FF 100%); --gradient-soft: linear-gradient(120deg, rgba(124, 92, 255, 0.16), rgba(57, 216, 255, 0.12)); --gradient-text: linear-gradient(100deg, #FFFFFF 0%, #C9D2FF 45%, #9FE7FF 100%); /* ---------- 辉光阴影 ---------- */ --glow-accent: 0 0 40px rgba(124, 92, 255, 0.28); --glow-blue: 0 0 40px rgba(85, 124, 255, 0.22); --glow-cyan: 0 0 36px rgba(57, 216, 255, 0.20); --shadow-card: 0 18px 50px -20px rgba(0, 0, 0, 0.8); --shadow-soft: 0 10px 30px -16px rgba(0, 0, 0, 0.7); /* ---------- 字体 ---------- */ --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; /* ---------- 字号（流式缩放） ---------- */ --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 3.75rem; /* ---------- 字重 ---------- */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; /* ---------- 行高 ---------- */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; /* ---------- 间距比例 ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- 圆角 ---------- */ --radius-sm: 10px; --radius-btn: 13px; /* 按钮 12–14px */ --radius-card: 18px; /* 普通卡片 16–20px */ --radius-lg: 22px; /* 大型卡片 20–24px */ --radius-nav: 18px; /* 导航栏 16–20px */ --radius-pill: 999px; /* ---------- 布局 ---------- */ --container-max: 1280px; --container-main: 1200px; --container-pad: 24px; /* 页面左右安全距离 */ /* ---------- 层级 ---------- */ --z-bg: 0; --z-content: 1; --z-nav: 100; --z-menu: 200; --z-overlay: 300; /* ---------- 动效时长 ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 0.2s; --duration-base: 0.4s; --duration-slow: 0.8s; /* ---------- 玻璃拟态 ---------- */ --glass-bg: rgba(14, 16, 22, 0.6); --glass-bg-strong: rgba(14, 16, 22, 0.82); --glass-blur: 14px; } /* ============================================================ 亮色主题：覆盖 :root 同名变量 通过 激活 ============================================================ */ [data-theme="light"] { /* ---------- 颜色：背景层 ---------- */ --color-bg: #F4F5F8; --color-bg-soft: #EAECF1; --color-surface: #FFFFFF; --color-surface-hover: #F0F2F7; /* ---------- 颜色：描边 ---------- */ --color-border: rgba(0, 0, 0, 0.10); --color-border-hover: rgba(0, 0, 0, 0.18); /* ---------- 颜色：文字（高级黑 → 高级灰） ---------- */ --color-text: #0B0C0F; /* 高级黑：近纯黑、柔和不死黑 */ --color-text-secondary: #3A4150; /* 高级灰：冷调深灰副文字 */ --color-text-muted: #6B7280; /* 中灰：弱化文字 */ /* ---------- 颜色：主题强调色（亮底更深，衬托白底） ---------- */ --color-accent: #5B3FE0; /* 紫：亮底加深 */ --color-accent-blue: #2348D6; /* 深蓝：亮底更深蓝，提升白底对比与图标衬托 */ --color-accent-cyan: #0FA3C9; /* 青：亮底加深 */ --color-white: #FFFFFF; /* ---------- 渐变（高级黑 → 高级灰） ---------- */ --gradient-accent: linear-gradient(120deg, #5B3FE0 0%, #2348D6 55%, #0FA3C9 100%); --gradient-soft: linear-gradient(120deg, rgba(91, 63, 224, 0.10), rgba(15, 163, 201, 0.08)); --gradient-text: linear-gradient(100deg, #0B0C0F 0%, #2E3340 50%, #4A5060 100%); /* ---------- 辉光阴影（亮底用更柔的暗影） ---------- */ --glow-accent: 0 0 32px rgba(107, 77, 255, 0.18); --glow-blue: 0 0 32px rgba(61, 107, 255, 0.16); --glow-cyan: 0 0 28px rgba(22, 184, 224, 0.14); --shadow-card: 0 18px 50px -20px rgba(15, 23, 42, 0.18); --shadow-soft: 0 10px 30px -16px rgba(15, 23, 42, 0.14); /* ---------- 玻璃拟态（亮底用半透白） ---------- */ --glass-bg: rgba(255, 255, 255, 0.6); --glass-bg-strong: rgba(255, 255, 255, 0.82); --glass-blur: 14px; }