/* ============================================================ 默契问答 · Design Tokens — Google Material Design 3 亮色/暗色双模式， 切换 ============================================================ */ :root { /* -- Surface -- */ --surface: #FFFFFF; --surface-alt: #F8F9FA; --surface-dark: #1E1E1E; --surface-alt-dark: #2D2D2D; /* -- Primary (Google Blue) -- */ --primary: #1A73E8; --on-primary: #FFFFFF; --primary-container: #D3E3FD; --on-primary-container: #041E49; /* -- Secondary (Google Green) -- */ --secondary: #1E8E3E; --secondary-container: #CEEAD6; --on-secondary-container: #062E0E; /* -- Tertiary (Amber/Gold) -- */ --tertiary: #F9AB00; --tertiary-container: #FEF7E0; /* -- Error (Google Red) -- */ --error: #D93025; --error-container: #FCE8E6; --on-error-container: #410002; /* -- Neutral -- */ --on-surface: #202124; --on-surface-variant: #5F6368; --outline: #DADCE0; --outline-variant: #E1E3E1; /* -- Elevation -- */ --elevation-1: 0 1px 2px 0 rgba(0,0,0,.05), 0 1px 3px 1px rgba(0,0,0,.05); --elevation-2: 0 1px 2px 0 rgba(0,0,0,.08), 0 2px 6px 2px rgba(0,0,0,.05); --elevation-3: 0 1px 3px 0 rgba(0,0,0,.10), 0 4px 8px 3px rgba(0,0,0,.05); /* -- Shape -- */ --shape-full: 100px; --shape-xl: 28px; --shape-lg: 20px; --shape-md: 16px; --shape-sm: 12px; --shape-xs: 8px; /* -- Type -- */ --font-display: 'PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif; --font-body: -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Segoe UI',system-ui,sans-serif; --font-mono: 'Cascadia Code','Fira Code','SF Mono','Consolas',monospace; /* -- Spacing -- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* -- Alias (keep old var names for compat) -- */ --ink: var(--on-surface); --ink-soft: var(--on-surface-variant); --violet: var(--primary); --coral: var(--secondary); --peach: var(--tertiary); --gold: var(--tertiary); --danger: var(--error); --mist: var(--surface-alt); --paper: var(--surface); --line: var(--outline); --line-soft: rgba(32,33,36,0.08); --white: #FFFFFF; --highlight: var(--primary-container); --gradient-sync: linear-gradient(135deg, #1A73E8 0%, #1E8E3E 100%); /* NEW tint vars */ --violet-tint: var(--primary-container); --coral-tint: var(--secondary-container); --danger-tint: var(--error-container); /* Shadow aliases */ --shadow-card: var(--elevation-1); --shadow-pop: var(--elevation-3); } /* ======== Dark Mode ======== */ [data-theme="dark"] { --surface: var(--surface-dark); --surface-alt: var(--surface-alt-dark); --primary: #8AB4F8; --on-primary: #062E6F; --primary-container: rgba(138,180,248,.15); --on-primary-container: #D3E3FD; --secondary: #34A853; --secondary-container: rgba(52,168,83,.15); --tertiary: #FDD663; --tertiary-container: rgba(253,214,99,.15); --error: #F28B82; --error-container: rgba(242,139,130,.15); --on-surface: #E8EAED; --on-surface-variant: #9AA0A6; --outline: #3C4043; --outline-variant: #49454F; --elevation-1: 0 1px 3px 1px rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.2); --elevation-2: 0 2px 6px 2px rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.2); --elevation-3: 0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px 0 rgba(0,0,0,.3); --line-soft: rgba(255,255,255,.08); --white: #FFFFFF; --highlight: var(--primary-container); } /* Theme toggle */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background .2s; background: transparent; border: none; color: var(--on-surface-variant); } .theme-toggle:hover { background: var(--surface-alt); }