/* wenlueducation design tokens — M11 unified design system + dark mode * * Token names are stable across themes. Components that consume --wl-* * automatically reflect light or dark when `` is * toggled. Theme toggle lives in /assets/js/theme.js. * * Light theme: institutional navy (M8 baseline) with gold accent. * Dark theme: deep slate-navy carrier, brightened navy primary, same gold. * * IMPORTANT: do not put hex colors in component CSS. Always reference these * variables. Otherwise dark mode is a per-component bug surface. */ :root { /* ── Brand · Navy (主) + Gold (点缀) ───────────────────── */ --wl-primary: #1B3A5B; --wl-primary-hover: #2E5C8A; --wl-primary-light: #E8EEF5; --wl-primary-deep: #11293F; --wl-gold: #C9A14A; --wl-gold-hover: #B48E3C; --wl-gold-light: #F7F0DC; /* ── Surface (page + card stack) ──────────────────────── */ --wl-bg: #F7F8FA; --wl-bg-elevated: #FFFFFF; /* slightly raised area (modals, popovers) */ --wl-card: #FFFFFF; --wl-card-hover: #F1F4F8; --wl-overlay: rgba(17, 41, 63, 0.45); /* modal scrim */ /* ── Text ──────────────────────────────────────────────── */ --wl-text: #1A1F2E; --wl-text-muted: #5B6472; --wl-text-strong: #11293F; --wl-text-on-primary: #FFFFFF; /* text on navy buttons */ --wl-text-on-gold: #11293F; /* text on gold buttons */ /* ── Border + divider ──────────────────────────────────── */ --wl-border: rgba(27, 58, 91, 0.12); --wl-border-strong: rgba(27, 58, 91, 0.24); --wl-divider: rgba(27, 58, 91, 0.08); /* ── Status family — small badges only ─────────────────── */ --wl-mint: #E6F2EC; --wl-mint-dark: #1F7A4C; --wl-amber: #FBF1DC; --wl-amber-dark: #8A6610; --wl-rose: #FBEAEC; --wl-rose-dark: #B83440; --wl-error: #C8423E; /* ── Input + control surfaces ─────────────────────────── */ --wl-input-bg: #FFFFFF; --wl-input-border: rgba(27, 58, 91, 0.18); --wl-input-text: #1A1F2E; --wl-input-placeholder: #8b8680; --wl-input-focus-ring: rgba(27, 58, 91, 0.18); /* ── Fonts ────────────────────────────────────────────── */ --wl-font-serif: 'DM Serif Display', 'Noto Serif SC', Georgia, 'Songti SC', serif; --wl-font-sans: 'DM Sans', 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; --wl-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Spacing — 8px grid ───────────────────────────────── */ --wl-space-1: 4px; --wl-space-2: 8px; --wl-space-3: 12px; --wl-space-4: 16px; --wl-space-5: 20px; --wl-space-6: 24px; --wl-space-8: 32px; --wl-space-12: 48px; --wl-space-16: 64px; /* ── Radii ────────────────────────────────────────────── */ --wl-radius-pill: 999px; --wl-radius-lg: 8px; --wl-radius-md: 6px; --wl-radius-sm: 4px; /* ── Shadows ──────────────────────────────────────────── */ --wl-shadow-card: 0 1px 3px rgba(17, 41, 63, 0.06), 0 1px 2px rgba(17, 41, 63, 0.04); --wl-shadow-card-hover: 0 6px 16px rgba(17, 41, 63, 0.08), 0 2px 4px rgba(17, 41, 63, 0.04); --wl-shadow-modal: 0 24px 70px rgba(17, 41, 63, 0.18); --wl-shadow-focus: 0 0 0 3px var(--wl-input-focus-ring); /* ── Motion ───────────────────────────────────────────── */ --wl-dur-hover: 120ms; --wl-dur-enter: 300ms; --wl-dur-reveal: 450ms; --wl-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* ── Layout caps ──────────────────────────────────────── */ --wl-content-max: 1080px; --wl-content-pad: var(--wl-space-8); /* ── Progress system ─────────────────────────────────── */ --wl-progress-done: var(--wl-primary); --wl-progress-current: var(--wl-gold); --wl-progress-future: rgba(27, 58, 91, 0.18); --wl-progress-bar: var(--wl-primary); } /* ============================================================ * DARK THEME (set on ) * ============================================================ */ :root.theme-dark { /* Brand — keep navy family so existing white-on-primary buttons still work. * Just shift one step lighter so it stands out against dark bg. */ --wl-primary: #3E6EA8; --wl-primary-hover: #5286C2; --wl-primary-light: #1B2A3E; /* tinted dark surface for "selected" rows */ --wl-primary-deep: #C8D6E8; /* inverted heaviest text color */ --wl-gold: #D9B86A; --wl-gold-hover: #E6C896; --wl-gold-light: #3A2F18; /* dark amber surface */ /* Surfaces */ --wl-bg: #0E1828; --wl-bg-elevated: #142339; --wl-card: #172538; --wl-card-hover: #1E3050; --wl-overlay: rgba(0, 0, 0, 0.65); /* Text */ --wl-text: #E2E8F2; --wl-text-muted: #8B95A8; --wl-text-strong: #F4F7FC; --wl-text-on-primary: #FFFFFF; /* white text on darkened navy primary */ --wl-text-on-gold: #0E1828; /* Borders */ --wl-border: rgba(255, 255, 255, 0.08); --wl-border-strong: rgba(255, 255, 255, 0.16); --wl-divider: rgba(255, 255, 255, 0.06); /* Status — darker surface variants, brighter foreground */ --wl-mint: #143A28; --wl-mint-dark: #6FCE9E; --wl-amber: #3A2F18; --wl-amber-dark: #E2C075; --wl-rose: #3A1B1F; --wl-rose-dark: #F0888F; --wl-error: #F0888F; /* Inputs */ --wl-input-bg: #0E1828; --wl-input-border: rgba(255, 255, 255, 0.16); --wl-input-text: #E2E8F2; --wl-input-placeholder: #6B7588; --wl-input-focus-ring: rgba(110, 165, 224, 0.30); /* Shadows — darker since the surface is dark, depth comes from contrast */ --wl-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --wl-shadow-card-hover: 0 6px 22px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --wl-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.6); /* Progress */ --wl-progress-done: var(--wl-primary); --wl-progress-current: var(--wl-gold); --wl-progress-future: rgba(255, 255, 255, 0.18); --wl-progress-bar: var(--wl-primary); } /* ── Theme transition smoothing (skip during initial paint by sysOnly toggle) ─ */ html.theme-transitioning, html.theme-transitioning * { transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, box-shadow 240ms ease !important; }