/* ========================================================================== Verity 设计令牌 · 亮色主题 唯一事实来源（Single Source of Truth） 本文件只定义自定义属性，不含任何选择器，因此可以在任何页面的 最前位置安全引入，不会影响既有布局。 其它样式表（style.css / theme-cinema.css / ui-system.css / console-ui.css） 一律通过 var() 引用令牌，不再自行硬编码色值。 可访问性约定： - 浅底上的文字/链接用 --accent-ink（5.57:1） - 承载白色文字的填充用 --accent / --accent-deep（≥4.54:1） - --accent-cyan（1.89:1）只用于装饰：光晕、进度条、分隔线，绝不承载文字 ========================================================================== */ :root { /* ---------- 主色 · 蓝色系 ---------- */ --accent: #1677ff; /* 品牌蓝：图形、填充、边框 */ --accent-ink: #0f62d9; /* 浅底文字与链接 · 5.57:1 */ --accent-deep: #0b53b8; /* hover / 渐变深端 · 7.13:1 */ --accent-cyan: #2fcbff; /* 装饰专用，不承载文字 */ --accent-cyan-soft: rgba(47,203,255,.08); /* 青色浅底，仅作装饰性底色 */ --accent-soft: rgba(22,119,255,.08); --accent-soft-hover: rgba(22,119,255,.14); --accent-line: rgba(22,119,255,.20); --accent-line-strong: rgba(22,119,255,.34); /* 白字安全渐变（两端 ≥4.54:1）——按钮、徽章实心填充 */ --accent-grad: linear-gradient(135deg,#0f62d9 0%,#1473e6 100%); /* 白底安全渐变文字（≥5.57:1）——标题强调、logo 加号 */ --accent-grad-ink: linear-gradient(90deg,#0b53b8 0%,#0f62d9 100%); /* 纯装饰渐变（含青色，不得承载文字）——光晕、进度条 */ --accent-grad-deco: linear-gradient(135deg,#1677ff 0%,#2fcbff 100%); /* ---------- 背景与表面 ---------- */ --bg-base: #ffffff; --bg-soft: #f5f7fa; --bg-tint: #f2f7ff; --surface: #ffffff; --surface-subtle: #f1f4f8; --surface-veil: rgba(255,255,255,.74); --glass-bg: rgba(255,255,255,.55); --glass-bg-strong: rgba(255,255,255,.72); /* ---------- 文字 ---------- */ --text-primary: #101828; /* 17.75:1 */ --text-secondary: #475467; /* 7.69:1 */ --text-tertiary: #667085; /* 4.97:1 */ --text-decorative: #8c8f96; /* 3.24:1 · 仅装饰性微型文字 */ --text-inverse: #ffffff; /* ---------- 线条 ---------- */ --line: rgba(16,24,40,.10); --line-soft: rgba(16,24,40,.08); --line-strong: rgba(16,24,40,.16); --border-soft: rgba(16,24,40,.10); /* ---------- 状态 ---------- */ --success: #079455; --success-soft: rgba(7,148,85,.08); --warning: #b54708; --warning-soft: rgba(181,71,8,.08); --danger: #d92d20; --danger-soft: rgba(217,45,32,.07); /* ---------- 圆角 ---------- */ --radius-sm: 6px; --radius: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 24px; --radius-full: 999px; /* ---------- 阴影 ---------- */ --shadow-sm: 0 1px 2px rgba(16,24,40,.05); --shadow: 0 8px 24px rgba(16,24,40,.08); --shadow-lg: 0 20px 58px rgba(16,24,40,.10); --shadow-accent: 0 14px 34px rgba(22,119,255,.22); --shadow-accent-strong: 0 18px 44px rgba(22,119,255,.28); /* ---------- 焦点环 · 可访问性 ---------- */ --focus-ring: 0 0 0 3px rgba(22,119,255,.30); --focus-ring-soft: 0 0 0 4px rgba(22,119,255,.12); /* ---------- 排版与布局 ---------- */ --font-sans: "Inter","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono: "SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --content: 1180px; --content-wide: 1280px; --content-narrow: 760px; --touch: 44px; /* ---------- 动效 ---------- */ --dur-fast: .16s; --dur: .24s; --ease: cubic-bezier(.2,0,0,1); }