/* ================================================= Brigade-Bot – Theme Variable Definitions Applied via data-theme attribute on ================================================= */ /* === Navy Blue (default) === */ :root, [data-theme="navy"] { --theme-bg-page: #141a28; --theme-bg-surface: #1a2235; --theme-bg-surface-alt: #1a2840; --theme-bg-panel: #08192e; --theme-bg-panel-end: #122640; --theme-bg-deep: #0f2240; --theme-bg-deep-alt: #0a1f38; --theme-bg-darkest: #0c1a2e; --theme-bg-modal: #131e30; --theme-bg-popup: #162030; --theme-bg-dropdown: #0c1e38; --theme-bg-checkbox: #1a2e45; --theme-bg-toolbar-hover: #132e54; --theme-bg-navbar: #060e1c; --theme-bg-navbar-end: #0b1828; --theme-bg-overlay: rgba(10, 18, 34, 0.7); --theme-accent-rgb: 74, 140, 218; --theme-accent: #4a8cda; --theme-accent-light: #7eb8f7; --theme-accent-mid: #5fa8de; --theme-accent-link: #5a90c8; --theme-text: #cfe3f5; --theme-text-secondary: #a8c8e8; --theme-text-hover: #e8f4ff; --theme-label-muted: rgba(160, 200, 240, 0.65); --theme-brand: #7eb8f7; --theme-link: #ffffff; --theme-btn-text: rgb(159, 173, 188); --theme-panel-text: #7eb8f7; --theme-on-accent: #0c1a2e; } /* === Forest Green === */ [data-theme="forest"] { --theme-bg-page: #131d16; --theme-bg-surface: #192218; --theme-bg-surface-alt: #1a2a1c; --theme-bg-panel: #081a0c; --theme-bg-panel-end: #102a14; --theme-bg-deep: #0d2410; --theme-bg-deep-alt: #091d0d; --theme-bg-darkest: #081508; --theme-bg-modal: #111e12; --theme-bg-popup: #142016; --theme-bg-dropdown: #0a1e0c; --theme-bg-checkbox: #182a1a; --theme-bg-toolbar-hover: #11301a; --theme-bg-navbar: #060e08; --theme-bg-navbar-end: #091408; --theme-bg-overlay: rgba(8, 18, 10, 0.7); --theme-accent-rgb: 46, 160, 100; --theme-accent: #2ea064; --theme-accent-light: #6dd4a4; --theme-accent-mid: #4dbb84; --theme-accent-link: #3a8a60; --theme-text: #d0f0dc; --theme-text-secondary: #a0c8b0; --theme-text-hover: #e8fff0; --theme-label-muted: rgba(120, 200, 155, 0.65); --theme-brand: #6dd4a4; --theme-link: #ffffff; --theme-btn-text: rgb(140, 185, 160); --theme-panel-text: #6dd4a4; --theme-on-accent: #081508; } /* === Midnight Purple === */ [data-theme="midnight"] { --theme-bg-page: #16131e; --theme-bg-surface: #201c2e; --theme-bg-surface-alt: #221e32; --theme-bg-panel: #100c1e; --theme-bg-panel-end: #1c1630; --theme-bg-deep: #180e2a; --theme-bg-deep-alt: #120c22; --theme-bg-darkest: #0e0a1c; --theme-bg-modal: #161220; --theme-bg-popup: #1c1828; --theme-bg-dropdown: #100c20; --theme-bg-checkbox: #201a32; --theme-bg-toolbar-hover: #1e1440; --theme-bg-navbar: #080614; --theme-bg-navbar-end: #0c0a18; --theme-bg-overlay: rgba(14, 10, 20, 0.7); --theme-accent-rgb: 120, 100, 220; --theme-accent: #7864dc; --theme-accent-light: #a898f8; --theme-accent-mid: #8e7aee; --theme-accent-link: #6858c0; --theme-text: #e8e0f8; --theme-text-secondary: #c0b0e8; --theme-text-hover: #f0ecff; --theme-label-muted: rgba(180, 160, 230, 0.65); --theme-brand: #a898f8; --theme-link: #ffffff; --theme-btn-text: rgb(175, 160, 215); --theme-panel-text: #a898f8; --theme-on-accent: #0e0a1c; } /* === Ember (dark amber) === */ [data-theme="ember"] { --theme-bg-page: #1c1510; --theme-bg-surface: #261c14; --theme-bg-surface-alt: #2e2018; --theme-bg-panel: #140c06; --theme-bg-panel-end: #221408; --theme-bg-deep: #0e0804; --theme-bg-deep-alt: #0a0802; --theme-bg-darkest: #080402; --theme-bg-modal: #1e1610; --theme-bg-popup: #1a1208; --theme-bg-dropdown: #120e06; --theme-bg-checkbox: #2a1c10; --theme-bg-toolbar-hover: #301808; --theme-bg-navbar: #0c0804; --theme-bg-navbar-end: #140c04; --theme-bg-overlay: rgba(20, 12, 6, 0.8); --theme-accent-rgb: 210, 110, 30; --theme-accent: #d26e1e; --theme-accent-light: #f0a050; --theme-accent-mid: #e08838; --theme-accent-link: #b85c10; --theme-text: #f5e8d0; --theme-text-secondary: #d8c0a0; --theme-text-hover: #fff8ec; --theme-label-muted: rgba(210, 170, 100, 0.65); --theme-brand: #f0a050; --theme-link: #ffffff; --theme-btn-text: rgb(210, 185, 150); --theme-panel-text: #f0a050; --theme-on-accent: #080402; } /* === Crimson (dark red) === */ [data-theme="crimson"] { --theme-bg-page: #1c1214; --theme-bg-surface: #261620; --theme-bg-surface-alt: #2e1a24; --theme-bg-panel: #140814; --theme-bg-panel-end: #200e1e; --theme-bg-deep: #0e060e; --theme-bg-deep-alt: #0a040e; --theme-bg-darkest: #080208; --theme-bg-modal: #1e1218; --theme-bg-popup: #1a0e16; --theme-bg-dropdown: #120a12; --theme-bg-checkbox: #2a1020; --theme-bg-toolbar-hover: #32082a; --theme-bg-navbar: #0c0810; --theme-bg-navbar-end: #140c14; --theme-bg-overlay: rgba(20, 8, 14, 0.8); --theme-accent-rgb: 200, 50, 70; --theme-accent: #c83246; --theme-accent-light: #f07088; --theme-accent-mid: #dc5068; --theme-accent-link: #a02030; --theme-text: #f5d8e0; --theme-text-secondary: #d8b0bc; --theme-text-hover: #fff0f4; --theme-label-muted: rgba(220, 140, 160, 0.65); --theme-brand: #f07088; --theme-link: #ffffff; --theme-btn-text: rgb(210, 165, 178); --theme-panel-text: #f07088; --theme-on-accent: #080208; } /* === Slate (dark steel-grey) === */ [data-theme="slate"] { --theme-bg-page: #161820; --theme-bg-surface: #1e2128; --theme-bg-surface-alt: #222530; --theme-bg-panel: #0e1018; --theme-bg-panel-end: #181c26; --theme-bg-deep: #0a0c14; --theme-bg-deep-alt: #080a10; --theme-bg-darkest: #060810; --theme-bg-modal: #181b22; --theme-bg-popup: #141720; --theme-bg-dropdown: #10131a; --theme-bg-checkbox: #1e2438; --theme-bg-toolbar-hover: #1c2440; --theme-bg-navbar: #080a10; --theme-bg-navbar-end: #0e1018; --theme-bg-overlay: rgba(10, 12, 18, 0.75); --theme-accent-rgb: 90, 130, 180; --theme-accent: #5a82b4; --theme-accent-light: #88aad4; --theme-accent-mid: #7096c4; --theme-accent-link: #4870a0; --theme-text: #d8dde8; --theme-text-secondary: #a8b0c0; --theme-text-hover: #edf0f5; --theme-label-muted: rgba(160, 175, 200, 0.65); --theme-brand: #88aad4; --theme-link: #ffffff; --theme-btn-text: rgb(155, 168, 188); --theme-panel-text: #88aad4; --theme-on-accent: #060810; } /* === Dawn (light, warm blue) === */ [data-theme="dawn"] { --theme-bg-page: #f2f5f9; --theme-bg-surface: #ffffff; --theme-bg-surface-alt: #e8f0f8; --theme-bg-panel: #2a5ea8; --theme-bg-panel-end: #3a78d0; --theme-bg-deep: #1e4a8c; --theme-bg-deep-alt: #1a3d78; --theme-bg-darkest: #0e2450; --theme-bg-modal: #ffffff; --theme-bg-popup: #f0f4f8; --theme-bg-dropdown: #f5f8fc; --theme-bg-checkbox: #d0e4f8; --theme-bg-toolbar-hover: #b8d0f0; --theme-bg-navbar: #1e3d6e; --theme-bg-navbar-end: #2a5ea8; --theme-bg-overlay: rgba(210, 225, 240, 0.9); --theme-accent-rgb: 58, 120, 208; --theme-accent: #3a78d0; --theme-accent-light: #6aa0e8; --theme-accent-mid: #4d8cd8; --theme-accent-link: #2060c0; --theme-text: #0a1628; --theme-text-secondary: #1a3050; --theme-text-hover: #04080f; --theme-label-muted: rgba(20, 60, 110, 0.75); --theme-brand: #c8e0f8; --theme-link: #0a1628; --theme-btn-text: #1a3050; --theme-panel-text: #ffffff; --theme-on-accent: #ffffff; } /* === Arctic (light, cool teal) === */ [data-theme="arctic"] { --theme-bg-page: #f0f5f5; --theme-bg-surface: #ffffff; --theme-bg-surface-alt: #e6f2f2; --theme-bg-panel: #147070; --theme-bg-panel-end: #1a8c8c; --theme-bg-deep: #0e5858; --theme-bg-deep-alt: #0c4848; --theme-bg-darkest: #083838; --theme-bg-modal: #ffffff; --theme-bg-popup: #eef5f5; --theme-bg-dropdown: #f2f8f8; --theme-bg-checkbox: #c0e8e8; --theme-bg-toolbar-hover: #a8d8d8; --theme-bg-navbar: #0e4848; --theme-bg-navbar-end: #147070; --theme-bg-overlay: rgba(200, 230, 230, 0.9); --theme-accent-rgb: 26, 158, 144; --theme-accent: #1a9e90; --theme-accent-light: #40c0b0; --theme-accent-mid: #2ab0a0; --theme-accent-link: #148878; --theme-text: #061a1a; --theme-text-secondary: #0d3030; --theme-text-hover: #020a0a; --theme-label-muted: rgba(10, 70, 60, 0.75); --theme-brand: #a0e0d8; --theme-link: #061a1a; --theme-btn-text: #0d3030; --theme-panel-text: #ffffff; --theme-on-accent: #ffffff; } /* === Light (light grayscale look) === */ [data-theme="light"] { --theme-bg-page: #f2f3f5; --theme-bg-surface: #ffffff; --theme-bg-surface-alt: #eceef1; --theme-bg-panel: #4c5561; --theme-bg-panel-end: #5d6673; --theme-bg-deep: #3f4752; --theme-bg-deep-alt: #353c46; --theme-bg-darkest: #252b34; --theme-bg-modal: #ffffff; --theme-bg-popup: #f7f8fa; --theme-bg-dropdown: #f8f9fb; --theme-bg-checkbox: #d9dde3; --theme-bg-toolbar-hover: #c8ced7; --theme-bg-navbar: #3b424c; --theme-bg-navbar-end: #4a525e; --theme-bg-overlay: rgba(210, 214, 220, 0.88); --theme-accent-rgb: 102, 112, 125; --theme-accent: #66707d; --theme-accent-light: #8a94a2; --theme-accent-mid: #788290; --theme-accent-link: #565f6b; --theme-text: #14181d; --theme-text-secondary: #2c3440; --theme-text-hover: #090b0d; --theme-label-muted: rgba(44, 52, 64, 0.72); --theme-brand: #e5e9ef; --theme-link: #14181d; --theme-btn-text: #2c3440; --theme-panel-text: #ffffff; --theme-on-accent: #ffffff; } /* === Graphite (dark grayscale) === */ [data-theme="graphite"] { --theme-bg-page: #191919; --theme-bg-surface: #262626; --theme-bg-surface-alt: #2d2d2d; --theme-bg-panel: #1f1f1f; --theme-bg-panel-end: #282828; --theme-bg-deep: #161616; --theme-bg-deep-alt: #131313; --theme-bg-darkest: #0f0f0f; --theme-bg-modal: #212121; --theme-bg-popup: #262626; --theme-bg-dropdown: #1c1c1c; --theme-bg-checkbox: #2e2e2e; --theme-bg-toolbar-hover: #363636; --theme-bg-navbar: #121212; --theme-bg-navbar-end: #1a1a1a; --theme-bg-overlay: rgba(15, 15, 15, 0.8); --theme-accent-rgb: 150, 155, 160; --theme-accent: #969ba0; --theme-accent-light: #b8bdc2; --theme-accent-mid: #a8adb2; --theme-accent-link: #cbced1; --theme-text: #e0e0e0; --theme-text-secondary: #b8b8b8; --theme-text-hover: #f0f0f0; --theme-label-muted: rgba(180, 180, 180, 0.72); --theme-brand: #d0d0d0; --theme-link: #f5f5f5; --theme-btn-text: #c0c0c0; --theme-panel-text: #e8e8e8; --theme-on-accent: #0a0a0a; }