/* * theme.css — 扣课系统统一设计 Token * * 设计风格：极简温暖风（Minimal Warmth） * 适用场景：音乐教育培训（尤克里里初学者 + 家长） * 命名规范：语义优先（--color-brand 而非 --orange） * * 使用方式：HTML 中引用 * * * 配套组件：/components/button.css /components/card.css /components/table.css */ :root { /* ========== 品牌色（主色） ========== */ --color-brand: #d97706; /* 琥珀金 Amber 600 — 尤克里里木质温暖感 */ --color-brand-hover: #b45309; /* Amber 700 — hover 加深 */ --color-brand-light: #fef3c7; /* Amber 100 — 浅色背景 */ --color-brand-glow: rgba(217, 119, 6, 0.12); /* 主色阴影 */ /* ========== 状态色（语义） ========== */ --color-success: #059669; /* 森林绿 Emerald 600 — 成功/确认 */ --color-success-light: #d1fae5; --color-danger: #dc2626; /* 红色 Red 600 — 错误/删除 */ --color-danger-light: #fee2e2; --color-warning: #d97706; /* 同品牌色 — 警告 */ --color-warning-light: #fef3c7; --color-info: #0284c7; /* 蓝色 Sky 600 — 信息/链接 */ --color-info-light: #e0f2fe; /* ========== 中性色（背景/文字） ========== */ --color-bg-base: #faf8f5; /* 奶白 — 全站背景 */ --color-bg-card: #ffffff; /* 卡片白 */ --color-bg-soft: #f5f3ef; /* 软背景 */ --color-bg-overlay: rgba(0, 0, 0, 0.5); /* 模态框遮罩 */ --color-text-ink: #1f2937; /* 炭黑 — 标题 */ --color-text-main: #374151; /* 深灰 — 正文 */ --color-text-muted: #6b7280; /* 中灰 — 辅助文字 (4.5:1 对比度达标) */ --color-text-faint: #9ca3af; /* 浅灰 — 占位/禁用 */ --color-line: #ebedf0; /* 浅分割线 */ --color-line-strong: #dfe2e7; /* 深分割线 */ /* ========== 圆角 ========== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* ========== 间距（4/8 倍数阶梯）========== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; /* ========== 字号 ========== */ --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 17px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; /* ========== 字重 ========== */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ========== 阴影 ========== */ --shadow-sm: 0 1px 3px rgba(16, 18, 22, 0.06); --shadow-md: 0 4px 16px -4px rgba(16, 18, 22, 0.10), 0 2px 6px -2px rgba(16, 18, 22, 0.06); --shadow-lg: 0 16px 48px -12px rgba(16, 18, 22, 0.16); /* ========== 过渡 ========== */ --transition-fast: 0.12s ease; --transition-base: 0.18s ease; --transition-slow: 0.28s ease; /* ========== 字体 ========== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif; --font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace; } /* ========== 全局基础样式 ========== */ html, body { margin: 0; padding: 0; background: var(--color-bg-base); color: var(--color-text-main); font-family: var(--font-sans); font-size: var(--font-size-base); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========== 全局焦点样式（可访问性） ========== */ *:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: var(--radius-xs); } button:focus-visible, a:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 0; border-color: var(--color-brand); } /* ========== 标题层级 ========== */ h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-text-ink); font-weight: var(--font-weight-semibold); line-height: 1.3; } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } h5 { font-size: var(--font-size-md); } h6 { font-size: var(--font-size-base); } /* ========== 链接 ========== */ a { color: var(--color-info); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-brand); text-decoration: underline; } /* ========== 表单元素基线 ========== */ input, select, textarea { font: inherit; color: var(--color-text-main); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], select, textarea { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-bg-card); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-glow); }