/* ========================================================================== COLOUR THEMES Only override colour tokens here — nothing structural. Pair with the variable-driven main.css. Swap themes by setting data-theme="..." on or (e.g. via the theme switcher widget). ========================================================================== */ /* ---------- DEFAULT (original red/coral accent) --------------------------- */ [data-theme="default"] { --bg: #000000; --bg-dark: #131313; --surface: #282828; --surface-alt: #444444; --surface-deep: #303030; --surface-light: #F9F9F9; --surface-muted: #DFDFDF; --primary: #FF6161; --primary-hover: #FF2424; --background-color: var(--primary); --text: #FFFFFF; --text-light: #F5F5F5; --text-muted: #8F8F8F; --text-muted-alt: #565656; --text-muted-2: #919191; --text-caption: #6A6A6A; --text-placeholder:#7E7E7E; --text-on-surface: #282828; --btn-text-alt: #565656; --border: #DADADA; --border-light: #5C5C5C; --search-bg: transparent; --autocomplete-bg: #FFFFFF; --autocomplete-border: #D4D4D4; --autocomplete-hover-bg: #E9E9E9; --autocomplete-active-bg: #1E90FF; --pagination-link-color: #FFFFFF; --pagination-link-border: #FFFFFF; --nav-bg: rgba(0, 0, 0, 0.7); --nav-text: #FFFFFF; --header-border: #535353; --last-cams-border: #555555; --topnav-bg: #333333; --topnav-border: #4D4D4D; --topnav-icon-bg: #2E2E2E; --topnav-text: #F2F2F2; --gradient-1: #323232; --gradient-2: #1C1C1C; --model-photo-bg: #D5D4D0; --model-photo-text: #1C1C1C; --badge-new-bg: #E62A27; --error-bg: #252525; /* functional / status colours — deliberately not brand-driven, so they stay legible and recognisable (green = online, orange = chat) across every theme below */ --status-online: #00CF00; --status-chat: #F05623; --status-select: #F6FE27; --status-step: #8BAF13; --status-error: #FF0000; } /* ---------- ROSE — soft pink accent (matches the prior pink stylesheet) --- */ [data-theme="rose"] { --bg: #000000; --bg-dark: #131313; --surface: #282828; --surface-alt: #444444; --surface-deep: #303030; --surface-light: #F9F9F9; --surface-muted: #DFDFDF; --primary: #F5A4C4; --primary-hover: #FF2424; --background-color: var(--primary); --text: #FFFFFF; --text-light: #F5F5F5; --text-muted: #8F8F8F; --text-muted-alt: #565656; --text-muted-2: #919191; --text-caption: #6A6A6A; --text-placeholder:#7E7E7E; --text-on-surface: #282828; --btn-text-alt: #565656; --border: #DADADA; --border-light: #5C5C5C; --search-bg: transparent; --autocomplete-bg: #FFFFFF; --autocomplete-border: #D4D4D4; --autocomplete-hover-bg: #E9E9E9; --autocomplete-active-bg: #1E90FF; --pagination-link-color: #FFFFFF; --pagination-link-border: #FFFFFF; --nav-bg: rgba(0, 0, 0, 0.7); --nav-text: #FFFFFF; --header-border: #535353; --last-cams-border: #555555; --topnav-bg: #333333; --topnav-border: #4D4D4D; --topnav-icon-bg: #2E2E2E; --topnav-text: #F2F2F2; --gradient-1: #323232; --gradient-2: #1C1C1C; --model-photo-bg: #D5D4D0; --model-photo-text: #1C1C1C; --badge-new-bg: #E62A27; --error-bg: #252525; --status-online: #00CF00; --status-chat: #F05623; --status-select: #F6FE27; --status-step: #8BAF13; --status-error: #FF0000; } /* ---------- ELECTRIC BLUE — cool, techy, high-energy ---------------------- */ [data-theme="electric-blue"] { --bg: #050B14; --bg-dark: #0A1220; --surface: #101C2E; --surface-alt: #16283F; --surface-deep: #0D1826; --surface-light: #F9F9F9; --surface-muted: #DFDFDF; --primary: #1E90FF; --primary-hover: #4FACFF; --background-color: var(--primary); --text: #FFFFFF; --text-light: #E6F1FF; --text-muted: #7B8CA8; --text-muted-alt: #9BB4D6; --text-muted-2: #6E86A8; --text-caption: #7B8CA8; --text-placeholder:#5E7292; --text-on-surface: #E6F1FF; --btn-text-alt: #DCE9FA; --border: #1E3352; --border-light: #2A4D7A; --search-bg: transparent; --autocomplete-bg: #0D1826; --autocomplete-border: #1E3352; --autocomplete-hover-bg: #16283F; --autocomplete-active-bg: #1E90FF; --pagination-link-color: #FFFFFF; --pagination-link-border: #FFFFFF; --nav-bg: rgba(5, 11, 20, 0.85); --nav-text: #FFFFFF; --header-border: #1E3352; --last-cams-border: #2A4D7A; --topnav-bg: #0A1220; --topnav-border: #1E3352; --topnav-icon-bg: #101C2E; --topnav-text: #E6F1FF; --gradient-1: #16283F; --gradient-2: #050B14; --model-photo-bg: #D5D4D0; --model-photo-text: #1C1C1C; --badge-new-bg: #FF3B3B; --error-bg: #14202E; --status-online: #00CF00; --status-chat: #F05623; --status-select: #F6FE27; --status-step: #8BAF13; --status-error: #FF0000; } /* ---------- TOXIC GREEN — hacker / neon nightlife -------------------------- */ [data-theme="toxic-green"] { --bg: #030A00; --bg-dark: #010400; --surface: #0F1B08; --surface-alt: #16260C; --surface-deep: #0A1405; --surface-light: #F9F9F9; --surface-muted: #DFDFDF; --primary: #39FF14; --primary-hover: #66FF44; --background-color: var(--primary); --text: #EAFFEA; --text-light: #D2FFD2; --text-muted: #5B8A5B; --text-muted-alt: #7ABF7A; --text-muted-2: #4F7A4F; --text-caption: #5B8A5B; --text-placeholder:#4A6A4A; --text-on-surface: #D2FFD2; --btn-text-alt: #CFFFCF; --border: #1A4A1A; --border-light: #2A7A2A; --search-bg: transparent; --autocomplete-bg: #0A1405; --autocomplete-border: #1A4A1A; --autocomplete-hover-bg: #16260C; --autocomplete-active-bg: #1E90FF; --pagination-link-color: #EAFFEA; --pagination-link-border: #EAFFEA; --nav-bg: rgba(3, 10, 0, 0.85); --nav-text: #EAFFEA; --header-border: #1A4A1A; --last-cams-border: #2A7A2A; --topnav-bg: #010400; --topnav-border: #1A4A1A; --topnav-icon-bg: #0F1B08; --topnav-text: #D2FFD2; --gradient-1: #16260C; --gradient-2: #030A00; --model-photo-bg: #D5D4D0; --model-photo-text: #1C1C1C; --badge-new-bg: #FF3B3B; --error-bg: #0D1808; --status-online: #00FF55; --status-chat: #F05623; --status-select: #F6FE27; --status-step: #8BAF13; --status-error: #FF0000; }