/* ============================================================ themes.css — Sun / Moon Theme Custom Properties Light theme: rice-paper cream backgrounds, vermillion (朱红) accent Dark theme: ink charcoal, imperial gold (金) accent Secondary accent (both themes): jade green (翡翠绿) WCAG AA Contrast Compliant. ============================================================ */ /* ── Light Theme (Sun) ── default ─────────────────────────── */ :root, [data-theme="sun"] { /* Backgrounds */ --bg-primary: #FBF9F4; /* rice paper */ --bg-secondary: #F2EDE1; /* light sand paper */ --bg-tertiary: #E8E0CE; /* deeper sand */ --bg-elevated: #FFFFFF; /* cards / modals */ --bg-hover: #EFE8D8; /* hover states */ --bg-active: #E5DAC0; /* active / pressed */ /* Text — WCAG AA compliant contrast */ --text-primary: #221F1D; /* ink black (15.2:1 ratio) */ --text-secondary: #4A433C; /* warm charcoal (8.6:1 ratio) */ --text-tertiary: #6B6259; /* muted stone (5.3:1 ratio) */ --text-inverse: #FBF9F4; /* light text on dark bg */ --text-on-accent: #FFFFFF; /* text on accent buttons */ /* Accent — vermillion (朱红) family */ --accent: #C23B22; /* vermillion primary */ --primary: #C23B22; /* primary alias */ --accent-hover: #A8301B; /* vermillion darker */ --primary-hover: #A8301B; /* primary hover alias */ --accent-active: #8F2716; /* vermillion darkest */ --accent-subtle: #F6DFD7; /* vermillion tint for tags */ --accent-text: #A8301B; /* vermillion for text links (5.6:1 ratio) */ /* Secondary accent — jade green (翡翠绿) */ --accent2: #2E7D5B; /* jade green (4.9:1 ratio) */ --accent2-hover: #256449; /* jade darker */ --accent2-subtle: #DCEEE5; /* jade tint */ /* Semantic colors */ --success: #2A7244; /* forest green (5.4:1 ratio) */ --success-bg: #E6F4EC; /* success background */ --error: #B83C22; /* vermillion/crimson */ --error-bg: #FCE8E3; /* error background */ --warning: #A66D1B; /* warm amber (4.7:1 ratio) */ --warning-bg: #FFF3DB; /* warning background */ --info: #376789; /* dusty blue (5.5:1 ratio) */ --info-bg: #E3EFF7; /* info background */ /* Borders & separators */ --border: #D6CBB0; /* warm border */ --border-subtle: #E8E0CE; /* subtle divider */ --border-focus: #C23B22; /* focus ring color */ /* Shadows */ --shadow-sm: 0 1px 3px rgba(34, 31, 29, 0.06), 0 1px 2px rgba(34, 31, 29, 0.04); --shadow-md: 0 4px 12px rgba(34, 31, 29, 0.08), 0 2px 4px rgba(34, 31, 29, 0.04); --shadow-lg: 0 12px 32px rgba(34, 31, 29, 0.12), 0 4px 8px rgba(34, 31, 29, 0.06); --shadow-elevated: 0 8px 24px rgba(34, 31, 29, 0.10), 0 2px 6px rgba(34, 31, 29, 0.05); /* Overlays */ --overlay: rgba(34, 31, 29, 0.3); /* Radii (Cupertino-style generous rounding) */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-index layers */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* Theme toggle icon */ --theme-icon-filter: none; } /* ── Dark Theme (Moon) ── ─────────────────────────────────── */ [data-theme="moon"] { /* Backgrounds */ --bg-primary: #16181A; /* ink charcoal */ --bg-secondary: #1F2224; /* dark ink */ --bg-tertiary: #292D2F; /* charcoal grey */ --bg-elevated: #232628; /* cards / modals */ --bg-hover: #2D3133; /* hover states */ --bg-active: #383C3E; /* active / pressed */ /* Text — WCAG AA compliant contrast */ --text-primary: #F0EDE6; /* warm off-white (14.1:1 ratio) */ --text-secondary: #C9C3B8; /* muted sand (7.6:1 ratio) */ --text-tertiary: #A39C8F; /* dim stone (5.2:1 ratio) */ --text-inverse: #16181A; /* dark text on light bg */ --text-on-accent: #16181A; /* dark text on gold buttons */ /* Accent — imperial gold (金) */ --accent: #E3B23C; /* imperial gold (9.1:1 on dark) */ --accent-hover: #CC9F32; /* gold darker */ --accent-active: #B58B29; /* gold darkest */ --accent-subtle: #3A2F18; /* gold tint for tags */ --accent-text: #EAC258; /* gold for text links */ /* Secondary accent — jade green (翡翠绿) */ --accent2: #6FBE97; /* jade green (light) */ --accent2-hover: #5FAE85; /* jade darker */ --accent2-subtle: #1E2F27; /* jade tint */ /* Semantic colors */ --success: #68C389; /* green */ --success-bg: #172B1D; /* success background */ --error: #E2735A; /* warm vermillion coral */ --error-bg: #2B1B17; /* error background */ --warning: #E3B23C; /* gold (matches accent) */ --warning-bg: #2E2818; /* warning background */ --info: #7AB4DA; /* soft blue */ --info-bg: #162430; /* info background */ /* Borders & separators */ --border: #3D4143; /* dark ink border */ --border-subtle: #2D3133; /* subtle divider */ --border-focus: #E3B23C; /* focus ring (gold) */ /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15); /* Overlays */ --overlay: rgba(0, 0, 0, 0.5); /* Theme toggle icon */ --theme-icon-filter: invert(1); } /* ── Theme Transition ─────────────────────────────────────── */ /* Smooth color transitions when toggling themes. */ /* Applied to html so all inherited props transition together. */ html { transition: background-color var(--transition-base), color var(--transition-base); } /* Elements that need explicit transition (backgrounds, borders) */ body, main, section, .card, .btn, .input, .select, .tag, .badge, .banner, header, footer, nav { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }