/* ============================================================================ tokens.css — Material 3 设计令牌 品牌种子: oklch(0.450 0.086 170) 氧化青绿 / 冷链青 全部颜色使用 OKLCH。对比度由 tools/check-contrast.mjs 逐对实测。 ========================================================================= */ :root { color-scheme: light dark; /* ---------- 形状 (M3 shape scale) ---------- */ --shape-xs: 4px; --shape-s: 8px; --shape-m: 12px; --shape-l: 16px; --shape-xl: 28px; --shape-full: 999px; /* ---------- 间距 (4px 基准) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ---------- 字体 ---------- 产品型界面：单一字族 + 系统栈。Android 上自动落到 Roboto / Noto Sans CJK。 不引入任何网络字体，保证离线可用。 */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* M3 字阶 — 固定 rem，不做流式缩放（产品型界面需要稳定 DPI 观感） */ --fs-display: 2.25rem; --lh-display: 1.22; --fs-headline: 1.5rem; --lh-headline: 1.33; --fs-title-l: 1.375rem; --lh-title-l: 1.27; --fs-title-m: 1rem; --lh-title-m: 1.5; --fs-title-s: 0.875rem; --lh-title-s: 1.43; --fs-body-l: 1rem; --lh-body-l: 1.5; --fs-body-m: 0.875rem; --lh-body-m: 1.43; --fs-body-s: 0.75rem; --lh-body-s: 1.33; --fs-label-l: 0.875rem; --lh-label-l: 1.43; --fs-label-m: 0.75rem; --lh-label-m: 1.33; --fs-label-s: 0.6875rem; --lh-label-s: 1.45; /* 题干专用：中文长句需要更松的行高 */ --fs-stem: 1.0625rem; --lh-stem: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --tracking-label: 0.03em; /* ---------- 动效 (M3 motion) ---------- */ --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-standard-decel: cubic-bezier(0, 0, 0, 1); --ease-standard-accel: cubic-bezier(0.3, 0, 1, 1); --dur-short1: 50ms; --dur-short2: 100ms; --dur-short3: 150ms; --dur-short4: 200ms; --dur-medium1: 250ms; --dur-medium2: 300ms; --dur-medium3: 350ms; --dur-medium4: 400ms; --dur-long1: 450ms; --dur-long2: 500ms; /* ---------- 层级 ---------- */ --z-base: 0; --z-sticky: 10; --z-fab: 20; --z-nav: 30; --z-scrim: 40; --z-sheet: 50; --z-dialog: 60; --z-snackbar: 70; /* ---------- 触控 ---------- */ --touch-min: 48px; /* ---------- 布局 ---------- 按 Material 3 窗口尺寸类分档（媒体查询里不能引用变量，这里只作文档）： Compact < 600px 手机 铺满，底部导航栏 Medium 600–839 平板竖屏 居中"设备画布"，底部导航栏 Expanded ≥ 840 桌面 铺满窗口 + 左侧 Navigation Rail Large ≥ 1200 宽屏 答题卡由底部弹层改为右侧边栏 */ --app-medium: 680px; /* Medium 档画布宽度 */ --rail-w: 88px; /* 导航栏在宽屏下的宽度 */ --content-max: 1120px; /* 桌面内容区上限 */ --reading-max: 880px; /* 答题区可读行宽上限 */ /* ========================================================================== Material 3 浅色色调 ======================================================================== */ --c-primary: oklch(0.4800 0.0900 172); --c-on-primary: oklch(1 0 none); --c-primary-container: oklch(0.9050 0.0450 172); --c-on-primary-container: oklch(0.2600 0.0500 172); --c-primary-fixed-dim: oklch(0.7600 0.0700 172); --c-secondary: oklch(0.4700 0.0300 200); --c-on-secondary: oklch(1 0 none); --c-secondary-container: oklch(0.9200 0.0220 200); --c-on-secondary-container: oklch(0.2900 0.0250 200); --c-tertiary: oklch(0.5200 0.1210 62); --c-on-tertiary: oklch(1 0 none); --c-tertiary-container: oklch(0.9150 0.0550 70); --c-on-tertiary-container: oklch(0.3100 0.0700 62); --c-error: oklch(0.5000 0.1900 27); --c-on-error: oklch(1 0 none); --c-error-container: oklch(0.9250 0.0375 25); --c-on-error-container: oklch(0.3200 0.1000 25); /* 判定语义色 —— 与 primary 的青绿(172°)拉开约 16° 色相，配合 ✓/✗ 图标使用 */ --c-correct: oklch(0.4850 0.1250 145); --c-on-correct: oklch(1 0 none); --c-correct-container: oklch(0.9200 0.0580 145); --c-on-correct-container: oklch(0.2800 0.0680 145); --c-wrong: oklch(0.5000 0.1900 27); --c-wrong-container: oklch(0.9250 0.0375 25); --c-on-wrong-container: oklch(0.3200 0.1000 25); --c-surface: oklch(0.9850 0.0055 172); --c-surface-dim: oklch(0.9450 0.0070 172); --c-surface-bright: oklch(1 0 none); --c-on-surface: oklch(0.2050 0.0130 172); --c-on-surface-variant: oklch(0.4250 0.0140 172); --c-surface-variant: oklch(0.9300 0.0110 172); --c-surface-container-lowest: oklch(1 0 none); --c-surface-container-low: oklch(0.9720 0.0060 172); --c-surface-container: oklch(0.9580 0.0075 172); --c-surface-container-high: oklch(0.9420 0.0090 172); --c-surface-container-highest:oklch(0.9250 0.0100 172); --c-outline: oklch(0.6350 0.0140 172); --c-outline-variant: oklch(0.8500 0.0100 172); --c-scrim: oklch(0 0 none); --c-inverse-surface: oklch(0.2900 0.0130 172); --c-inverse-on-surface: oklch(0.9550 0.0070 172); --c-inverse-primary: oklch(0.8000 0.0800 172); /* 状态层透明度 (M3 state layer) */ --state-hover: 0.08; --state-focus: 0.10; --state-pressed: 0.10; --state-dragged: 0.16; /* 海拔 (M3 elevation) */ --elev-0: none; --elev-1: 0 1px 2px 0 oklch(0 0 0 / 0.18), 0 1px 3px 1px oklch(0 0 0 / 0.10); --elev-2: 0 1px 2px 0 oklch(0 0 0 / 0.18), 0 2px 6px 2px oklch(0 0 0 / 0.10); --elev-3: 0 1px 3px 0 oklch(0 0 0 / 0.20), 0 4px 8px 3px oklch(0 0 0 / 0.10); --elev-4: 0 2px 3px 0 oklch(0 0 0 / 0.20), 0 6px 10px 4px oklch(0 0 0 / 0.10); } /* ========================================================================== Material 3 深色色调 ======================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) { --c-primary: oklch(0.8100 0.0760 172); --c-on-primary: oklch(0.2400 0.0480 172); --c-primary-container: oklch(0.3800 0.0660 172); --c-on-primary-container: oklch(0.9100 0.0450 172); --c-primary-fixed-dim: oklch(0.4600 0.0800 172); --c-secondary: oklch(0.8300 0.0280 200); --c-on-secondary: oklch(0.2600 0.0220 200); --c-secondary-container: oklch(0.3700 0.0260 200); --c-on-secondary-container: oklch(0.9100 0.0200 200); --c-tertiary: oklch(0.8400 0.0930 74); --c-on-tertiary: oklch(0.2900 0.0620 62); --c-tertiary-container: oklch(0.4000 0.0920 62); --c-on-tertiary-container: oklch(0.9300 0.0500 74); --c-error: oklch(0.7900 0.1210 27); --c-on-error: oklch(0.2900 0.1000 27); --c-error-container: oklch(0.4100 0.1280 27); --c-on-error-container: oklch(0.9300 0.0340 25); --c-correct: oklch(0.8350 0.1050 145); --c-on-correct: oklch(0.2600 0.0720 145); --c-correct-container: oklch(0.3750 0.0800 145); --c-on-correct-container: oklch(0.9200 0.0580 145); --c-wrong: oklch(0.7900 0.1210 27); --c-wrong-container: oklch(0.4100 0.1280 27); --c-on-wrong-container: oklch(0.9300 0.0340 25); --c-surface: oklch(0.1750 0.0090 172); --c-surface-dim: oklch(0.1750 0.0090 172); --c-surface-bright: oklch(0.3400 0.0120 172); --c-on-surface: oklch(0.9150 0.0080 172); --c-on-surface-variant: oklch(0.7950 0.0120 172); --c-surface-variant: oklch(0.3100 0.0130 172); --c-surface-container-lowest: oklch(0.1250 0.0070 172); --c-surface-container-low: oklch(0.2050 0.0090 172); --c-surface-container: oklch(0.2350 0.0100 172); --c-surface-container-high: oklch(0.2750 0.0110 172); --c-surface-container-highest:oklch(0.3100 0.0120 172); --c-outline: oklch(0.5800 0.0130 172); --c-outline-variant: oklch(0.3300 0.0120 172); --c-scrim: oklch(0 0 none); --c-inverse-surface: oklch(0.9150 0.0080 172); --c-inverse-on-surface: oklch(0.2350 0.0100 172); --c-inverse-primary: oklch(0.4800 0.0900 172); --elev-1: 0 1px 2px 0 oklch(0 0 0 / 0.45), 0 1px 3px 1px oklch(0 0 0 / 0.30); --elev-2: 0 1px 2px 0 oklch(0 0 0 / 0.45), 0 2px 6px 2px oklch(0 0 0 / 0.30); --elev-3: 0 1px 3px 0 oklch(0 0 0 / 0.50), 0 4px 8px 3px oklch(0 0 0 / 0.30); --elev-4: 0 2px 3px 0 oklch(0 0 0 / 0.50), 0 6px 10px 4px oklch(0 0 0 / 0.30); } } /* 显式深色（应用内切换） */ :root[data-theme="dark"] { color-scheme: dark; --c-primary: oklch(0.8100 0.0760 172); --c-on-primary: oklch(0.2400 0.0480 172); --c-primary-container: oklch(0.3800 0.0660 172); --c-on-primary-container: oklch(0.9100 0.0450 172); --c-primary-fixed-dim: oklch(0.4600 0.0800 172); --c-secondary: oklch(0.8300 0.0280 200); --c-on-secondary: oklch(0.2600 0.0220 200); --c-secondary-container: oklch(0.3700 0.0260 200); --c-on-secondary-container: oklch(0.9100 0.0200 200); --c-tertiary: oklch(0.8400 0.0930 74); --c-on-tertiary: oklch(0.2900 0.0620 62); --c-tertiary-container: oklch(0.4000 0.0920 62); --c-on-tertiary-container: oklch(0.9300 0.0500 74); --c-error: oklch(0.7900 0.1210 27); --c-on-error: oklch(0.2900 0.1000 27); --c-error-container: oklch(0.4100 0.1280 27); --c-on-error-container: oklch(0.9300 0.0340 25); --c-correct: oklch(0.8350 0.1050 145); --c-on-correct: oklch(0.2600 0.0720 145); --c-correct-container: oklch(0.3750 0.0800 145); --c-on-correct-container: oklch(0.9200 0.0580 145); --c-wrong: oklch(0.7900 0.1210 27); --c-wrong-container: oklch(0.4100 0.1280 27); --c-on-wrong-container: oklch(0.9300 0.0340 25); --c-surface: oklch(0.1750 0.0090 172); --c-surface-dim: oklch(0.1750 0.0090 172); --c-surface-bright: oklch(0.3400 0.0120 172); --c-on-surface: oklch(0.9150 0.0080 172); --c-on-surface-variant: oklch(0.7950 0.0120 172); --c-surface-variant: oklch(0.3100 0.0130 172); --c-surface-container-lowest: oklch(0.1250 0.0070 172); --c-surface-container-low: oklch(0.2050 0.0090 172); --c-surface-container: oklch(0.2350 0.0100 172); --c-surface-container-high: oklch(0.2750 0.0110 172); --c-surface-container-highest:oklch(0.3100 0.0120 172); --c-outline: oklch(0.5800 0.0130 172); --c-outline-variant: oklch(0.3300 0.0120 172); --c-scrim: oklch(0 0 none); --c-inverse-surface: oklch(0.9150 0.0080 172); --c-inverse-on-surface: oklch(0.2350 0.0100 172); --c-inverse-primary: oklch(0.4800 0.0900 172); --elev-1: 0 1px 2px 0 oklch(0 0 0 / 0.45), 0 1px 3px 1px oklch(0 0 0 / 0.30); --elev-2: 0 1px 2px 0 oklch(0 0 0 / 0.45), 0 2px 6px 2px oklch(0 0 0 / 0.30); --elev-3: 0 1px 3px 0 oklch(0 0 0 / 0.50), 0 4px 8px 3px oklch(0 0 0 / 0.30); --elev-4: 0 2px 3px 0 oklch(0 0 0 / 0.50), 0 6px 10px 4px oklch(0 0 0 / 0.30); }