/* ============================================================ GheReCess -- theme.css Light / dark surfaces, plus four switchable accents: pink, blue, red, purple. Selected via data-attributes on . ============================================================ */ /* ---------- Dark mode (default): deep plum-charcoal "study room at night" ---------- */ body[data-theme-mode="dark"] { --bg-deep: #1B1822; --bg-surface: #221E2C; --bg-raised: #2B2636; --bg-raised-2: #332D40; --border-soft: #3A3447; --text-primary: #EDE7F0; --text-muted: #A79CB5; --text-faint: #756B85; --bubble-other: #2B2636; --bubble-other-text: #EDE7F0; } /* ---------- Light mode: warm paper "study desk by the window" ---------- */ body[data-theme-mode="light"] { --bg-deep: #F2ECE3; --bg-surface: #E9E0D3; --bg-raised: #FBF7F0; --bg-raised-2: #FFFFFF; --border-soft: #DCD0BC; --text-primary: #2B2531; --text-muted: #6E6377; --text-faint: #99907F; --bubble-other: #FFFFFF; --bubble-other-text: #2B2531; } /* ---------- Accents ---------- */ body[data-theme-accent="pink"] { --accent-300: #F1C3D4; --accent-500: #DD90AC; --accent-600: #C4759A; --accent-text-on: #2B1620; } body[data-theme-accent="blue"] { --accent-300: #C3D8EE; --accent-500: #8FB4DC; --accent-600: #6E96C4; --accent-text-on: #11202E; } body[data-theme-accent="red"] { --accent-300: #E9C3B7; --accent-500: #D08A77; --accent-600: #B96E5B; --accent-text-on: #2E1410; } body[data-theme-accent="purple"] { --accent-300: #D6C8EE; --accent-500: #A893D9; --accent-600: #8C76C0; --accent-text-on: #1E1830; } .bubble-mine { background: var(--accent-500); color: var(--accent-text-on); }