/* ============================================================ 设计令牌 · 红白扁平主题（朱红 #E63323） AI 未来学校平台 — Design Tokens 用法：在任意页面 引入本文件（置于其他业务 CSS 之前）， 组件样式一律引用 var(--token)，不要再写死颜色值。 ============================================================ */ :root { /* ---------- 品牌色（朱红主色阶） ---------- */ --brand-50: #fef3f2; /* 最浅底：hover 背景、超浅区块 */ --brand-100: #fde8e6; /* 浅底：选中态背景、标签底 */ --brand-200: #f8c9c2; /* 浅色描边/分隔 */ --brand-300: #f5c6c0; /* 边框红（卡片 hover 边） */ --brand-400: #f8a99e; /* 浅珊瑚：渐变浅端、次要图标 */ --brand-500: #f2796b; /* 珊瑚：渐变浅端、辅助强调 */ --brand-600: #e63323; /* ★ 主色 Primary（按钮、链接、激活） */ --brand-700: #c0271b; /* 深色：hover/按下、强调文字 */ --brand-800: #9e1f15; /* 暗色：深底/深阴影基色 */ /* 语义别名（推荐业务层使用这些，而非数字阶） */ --brand: var(--brand-600); --brand-hover: var(--brand-700); --brand-active: var(--brand-800); --brand-soft: var(--brand-100); /* 选中/标签背景 */ --brand-subtle: var(--brand-50); /* hover 背景 */ --brand-border: var(--brand-300); /* 强调边框 */ --brand-coral: var(--brand-500); /* 渐变浅端 */ --brand-gradient: linear-gradient(135deg, #f2796b, #e63323); /* ---------- 中性色（文字 / 灰阶 / 线条） ---------- */ --ink: #1f2933; /* 正文主色 */ --ink-strong: #0f172a; /* 标题/最深文字 */ --ink-2: #475569; /* 次级文字 */ --ink-3: #64748b; /* 辅助说明文字 */ --ink-4: #94a3b8; /* 占位/弱化文字 */ --line: #ececef; /* 默认描边/分隔线 */ --line-soft: #f1f5f9; /* 更浅分隔线 */ /* ---------- 表面 / 背景 ---------- */ --surface: #ffffff; /* 卡片/弹层表面 */ --surface-2: #f8fafc; /* 内嵌浅块 */ --page-bg: #f5f6f8; /* 页面底色 */ --overlay: rgba(15, 23, 42, 0.32); /* 蒙层 */ /* ---------- 功能/状态色（保持可识别，红系为主） ---------- */ --success: #16a34a; /* 仅用于真正"成功/通过"，默认可用 --brand 表达 */ --warning: #d97706; --danger: #dc2626; /* 危险/删除（与品牌红区分用更纯的 red-600） */ --info: var(--brand-600); /* ---------- 圆角 ---------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; /* 卡片默认 */ --radius-xl: 16px; /* 弹窗 */ --radius-pill: 999px; /* ---------- 间距（4 的倍数节奏） ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* ---------- 阴影（统一中性投影，弱化、扁平） ---------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 22px -18px rgba(15, 23, 42, 0.16); --shadow-md: 0 1px 2px rgba(15, 23, 42, 0.05), 0 14px 30px -20px rgba(15, 23, 42, 0.18); --shadow-brand: 0 14px 30px -20px rgba(230, 51, 35, 0.30); /* 主色投影（按钮/hover） */ --ring-brand: 0 0 0 3px rgba(230, 51, 35, 0.12); /* 聚焦红环 */ /* ---------- 字体 ---------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; /* ---------- 兼容旧变量（历史 --edu-* 重定向到红，勿删） ---------- */ --edu-violet: var(--brand-600); --edu-blue: var(--brand-700); --edu-cyan: var(--brand-500); --edu-line: var(--line); --edu-ink: var(--ink-strong); --edu-shadow: var(--shadow-sm); } /* ============================================================ 可选：原子工具类（按需使用，纯令牌驱动） ============================================================ */ .u-bg-brand { background: var(--brand) !important; } .u-bg-brand-soft { background: var(--brand-soft) !important; } .u-text-brand { color: var(--brand) !important; } .u-border-brand { border-color: var(--brand-border) !important; } .u-gradient-brand { background: var(--brand-gradient) !important; } .u-btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; } .u-btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-brand); transform: translateY(-1px); } .u-btn-ghost { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; } .u-btn-ghost:hover { border-color: var(--brand-border); color: var(--brand-hover); background: var(--brand-subtle); } .u-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color .18s ease, box-shadow .18s ease; } .u-card:hover { border-color: var(--brand-border); box-shadow: var(--shadow-md); } .u-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--brand-soft); color: var(--brand-hover); font-size: 12px; font-weight: 500; } /* 统一聚焦环 */ :where(button, a, input, textarea, select, [role="tab"]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }