/* ═══ Trivium Theme System ═══ */ /* Dark mode is default. Light mode via [data-theme="light"] on . */ :root, [data-theme="dark"] { --bg-page: #0F0F0F; --bg-surface: #1A1A1A; --bg-elevated: #242424; --bg-input: #1E1E1E; --bg-page-alt: #111; --border-main: #2A2A2A; --border-light: #333; --border-subtle: #444; --text-primary: #F5F5F5; --text-secondary: #A0A0A0; --text-muted: #888; --text-faint: #6B6B6B; --accent: #C9A84C; --accent-hover: #B8973F; --accent-deep: #a88430; --accent-bg: rgba(201, 168, 76, 0.12); --accent-bg-solid: #1a1810; --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 32px rgba(0,0,0,0.5); --shadow-lg: 0 4px 16px rgba(0,0,0,0.4); --bubble-user: #C9A84C; --bubble-user-text: #FFFFFF; --bubble-ai: #1e1e1e; --bubble-ai-border: #2a2a2a; --bubble-ai-text: #e8e8e8; --code-bg: #2A2A2A; --pre-bg: #1A1A1A; --scrollbar-thumb: #333; --scrollbar-hover: #444; --overlay: rgba(0,0,0,0.5); --thinker-bg: #1C1C2E; --thinker-border: #2D2D4A; --tag-beginner-bg: rgba(76,175,80,.1); --tag-beginner-text: #4CAF50; --tag-beginner-border: rgba(76,175,80,.2); --tag-intermediate-bg: rgba(201,168,76,.12); --tag-intermediate-text: #C9A84C; --tag-intermediate-border: rgba(201,168,76,.3); --tag-advanced-bg: rgba(229,115,115,.1); --tag-advanced-text: #E57373; --tag-advanced-border: rgba(229,115,115,.2); color-scheme: dark; } [data-theme="light"] { --bg-page: #F7F6F3; --bg-surface: #FFFFFF; --bg-elevated: #F5F0E8; --bg-input: #FFFFFF; --bg-page-alt: #F5F5F5; --border-main: #E8E8E8; --border-light: #D0D0D0; --border-subtle: #C0C0C0; --text-primary: #0A0A0A; --text-secondary: #6B6B6B; --text-muted: #9A9A9A; --text-faint: #AAAAAA; --accent: #C9A84C; --accent-hover: #a88430; --accent-deep: #8b6914; --accent-bg: #F0E6CC; --accent-bg-solid: #F0E6CC; --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 8px 32px rgba(0,0,0,0.08); --shadow-lg: 0 4px 16px rgba(0,0,0,0.06); --bubble-user: #C9A84C; --bubble-user-text: #FFFFFF; --bubble-ai: #FFFFFF; --bubble-ai-border: #E8E8E8; --bubble-ai-text: #0A0A0A; --code-bg: #F0EDE8; --pre-bg: #F5F2ED; --scrollbar-thumb: #CCC; --scrollbar-hover: #AAA; --overlay: rgba(0,0,0,0.3); --thinker-bg: #F8F4EE; --thinker-border: #E8E0D4; --tag-beginner-bg: rgba(76,175,80,.08); --tag-beginner-text: #388E3C; --tag-beginner-border: rgba(76,175,80,.15); --tag-intermediate-bg: #F0E6CC; --tag-intermediate-text: #8b6914; --tag-intermediate-border: #C9A84C; --tag-advanced-bg: rgba(229,115,115,.08); --tag-advanced-text: #C62828; --tag-advanced-border: rgba(229,115,115,.15); color-scheme: light; }