/* ─────────────────────────────────────────────── Theme System Colors: Purple (#a310ff) + Gold (#ffbc3f) Based on data-theme attribute on ─────────────────────────────────────────────── */ /* ─── Dark Theme (Default) ─── */ :root, [data-theme="dark"] { --bg-body: #131313; --bg-card: #272727; --bg-card-hover: #2e2e2e; --bg-card-purple: #29252b; --bg-dark: #131313; --bg-dark-2: #3d3d3d; --bg-black: #1a1a1a; --bg-accent: #3a2909; --bg-light-purple: #c7bacf; --bg-light-purple-1: #a097a6; --bg-light-purple-2: #725f7e; --bg-light-purple-3: #584a61; --bg-light-gold: #ffe7ba; --text-primary: #ffffff; --text-secondary: #bfbfbf; --text-muted: #868686; --text-gray: #515151; --text-purple: #cf83ff; --text-gold: #ffc01c; --text-info: #00d0ff; --text-success: #24ffaf; --text-warning: #ffcb31; --text-danger: #ff5252; --text-brown: #ff8c7f; --border-color: #434343; --border-gold: #473a1c; --border-light-gold: #92742f; --border-purple: #aa18ff; --border-light-purple: #ab94bb; --btn-dark-bg: #222222; --btn-dark-gradient: linear-gradient(180deg, rgb(70, 70, 70) 0%, rgb(0, 0, 0) 100%); --btn-purple-bg: #9800f8; --shadow-color: rgba(0, 0, 0, 0.5); --shadow-md: 0 3px 25px rgba(0, 0, 0, 0.5); --shadow-lg: 0 0px 35px rgba(0, 0, 0, 0.4); --scrollbar-track: #131313; --scrollbar-thumb: #131313; --modal-bg: #00000088; --modal-content-bg: white; --accordion-collapsed-bg: #3b3b3b; --accordion-expanded-bg: #6f0aad; --form-switch-bg: #584a61; --form-switch-border: #8e7c9a; --form-switch-checked-bg: #9800f8; --form-switch-checked-border: #b94aff; --checkbox-bg: #333333; --checkbox-border: #484848; --checkbox-checked-bg: #584a61; --checkbox-shadow: #3f0563; --input-group-bg: #333333; --input-group-border: #484848; --input-group-text-color: #cdc6d1; --input-placeholder-color: #ccbdd4; --dropdown-bg: #e0dbe3; --dropdown-border: #bab1c1; --dropdown-hover-bg: #9800f8; --dropdown-backdrop: #091817a0; --popover-bg: #29252b; --popover-color: #fff; --popover-arrow-border: #29252b; --table-thead-bg: #333333; --table-tbody-bg: #413f3f; --table-td-color: #e0e0e0; --sidenav-bg: #212121; --sidenav-shadow: #1d1d1d; --nprogress-bg: #9800f8; --nprogress-peg-shadow: #c76dff, #64059f; --loading-spinner-border: rgba(255, 255, 255, 0.15); --notification-sender-color: #fff; --notification-time-color: #888; --notification-msg-color: #c5c5c5; --notification-empty-title: #fff; --notification-empty-desc: #aaaaaa; --notification-empty-sub: #666; --notification-load-more-color: #cf83ff; --ribbon-dark-bg: #262626; --ribbon-dark-before: #052d28; --range-track-bg: #584a61; --range-thumb-bg: #ac97ba; --range-thumb-border: #c2a9d2; --notification-card-bg: rgba(255, 255, 255, 0.04); --notification-card-border: rgba(255, 255, 255, 0.08); --notification-accent-chat: linear-gradient(180deg, #00d4ff, #0099ff); --notification-accent-promotion: linear-gradient(180deg, #ff6b6b, #ee5a24); --notification-accent-invite: linear-gradient(180deg, #ffd700, #ff8c00); --notification-accent-verification: linear-gradient(180deg, #2ecc71, #27ae60); --nav-bottom-gradient: linear-gradient(360deg, #2d2d2dc2 0%, #000000be 100%); --nav-bottom-shadow: #000000; --swiper-overlay-top: #212121; --swiper-overlay-bottom-intro: #2b0641; --swiper-overlay-bottom-info: #252525; --account-tab-color: #60706f; --account-tab-active-bg: #ffffff; --account-tab-active-color: #05201e; --chat-bg-image: url('../../../assets/app/images/bgs/chat.jpg'); --charge-header-bg: #1a1a2e; --charge-page-bg: #131313; --promotion-counter-color: #fff; --promotion-counter-bg: transparent; } /* ─── Light Theme ─── */ [data-theme="light"] { --bg-body: #f5f3f7; --bg-card: #ffffff; --bg-card-hover: #f0ecf5; --bg-card-purple: #f3edf7; --bg-dark: #e9e4f0; --bg-dark-2: #d8d0e3; --bg-black: #f8f6fa; --bg-accent: #fff8e5; --bg-light-purple: #e8dcf5; --bg-light-purple-1: #d4c4e3; --bg-light-purple-2: #b9a1cd; --bg-light-purple-3: #9f86b5; --bg-light-gold: #fff3d1; --text-primary: #1a1a2e; --text-secondary: #5c5c7a; --text-muted: #787890; --text-gray: #6b6b80; --text-purple: #6b21a8; --text-gold: #b8860b; --text-info: #0077b6; --text-success: #059669; --text-warning: #d97706; --text-danger: #dc2626; --text-brown: #b55a3a; --border-color: #d8d0e3; --border-gold: #e5c885; --border-light-gold: #c4a355; --border-purple: #9333ea; --border-light-purple: #c4b5d4; --btn-dark-bg: #1a1a2e; --btn-dark-gradient: linear-gradient(180deg, rgb(80, 70, 100) 0%, rgb(30, 25, 45) 100%); --btn-purple-bg: #7c3aed; --shadow-color: rgba(100, 70, 130, 0.12); --shadow-md: 0 3px 25px rgba(100, 70, 130, 0.12); --shadow-lg: 0 0px 35px rgba(100, 70, 130, 0.1); --scrollbar-track: #e9e4f0; --scrollbar-thumb: #c4b5d4; --modal-bg: rgba(30, 25, 45, 0.3); --modal-content-bg: #ffffff; --accordion-collapsed-bg: #e9e4f0; --accordion-expanded-bg: #7c3aed; --form-switch-bg: #e9e4f0; --form-switch-border: #c4b5d4; --form-switch-checked-bg: #7c3aed; --form-switch-checked-border: #a78bfa; --checkbox-bg: #f8f6fa; --checkbox-border: #d8d0e3; --checkbox-checked-bg: #ede0f7; --checkbox-shadow: rgba(100, 70, 130, 0.15); --input-group-bg: #e9e4f0; --input-group-border: #c4b5d4; --input-group-text-color: #6b6b80; --input-placeholder-color: #8b8ba0; --dropdown-bg: #f8f6fa; --dropdown-border: #d8d0e3; --dropdown-hover-bg: #7c3aed; --dropdown-backdrop: rgba(30, 25, 45, 0.5); --popover-bg: #f3edf7; --popover-color: #1a1a2e; --popover-arrow-border: #f3edf7; --table-thead-bg: #e9e4f0; --table-tbody-bg: #f8f6fa; --table-td-color: #1a1a2e; --sidenav-bg: #f3edf7; --sidenav-shadow: rgba(100, 70, 130, 0.15); --nprogress-bg: #7c3aed; --nprogress-peg-shadow: #c084fc, #6b21a8; --loading-spinner-border: rgba(0, 0, 0, 0.1); --notification-sender-color: #1a1a2e; --notification-time-color: #787890; --notification-msg-color: #5c5c7a; --notification-empty-title: #1a1a2e; --notification-empty-desc: #5c5c7a; --notification-empty-sub: #787890; --notification-load-more-color: #6b21a8; --ribbon-dark-bg: #2d2d3f; --ribbon-dark-before: #1a1a2e; --range-track-bg: #c4b5d4; --range-thumb-bg: #7c3aed; --range-thumb-border: #a78bfa; --notification-card-bg: rgba(0, 0, 0, 0.03); --notification-card-border: rgba(0, 0, 0, 0.06); --notification-accent-chat: linear-gradient(180deg, #0099ff, #0066cc); --notification-accent-promotion: linear-gradient(180deg, #ff6b6b, #ee5a24); --notification-accent-invite: linear-gradient(180deg, #ffd700, #ff8c00); --notification-accent-verification: linear-gradient(180deg, #2ecc71, #27ae60); --nav-bottom-gradient: linear-gradient(360deg, rgba(245, 243, 247, 0.85) 0%, rgba(255, 255, 255, 0.95) 100%); --nav-bottom-shadow: rgba(100, 70, 130, 0.2); --swiper-overlay-top: #f3edf7; --swiper-overlay-bottom-intro: #e8dcf5; --swiper-overlay-bottom-info: #f0ecf5; --account-tab-color: #787890; --account-tab-active-bg: #f3edf7; --account-tab-active-color: #1a1a2e; --chat-bg-image: url('../../../assets/app/images/bgs/chat_light.jpg'); --charge-header-bg: #f3edf7; --charge-page-bg: #f5f3f7; --promotion-counter-color: #1a1a2e; --promotion-counter-bg: #e9e4f0; }