/*
 * Shared homepage colour themes.
 * Active theme: $SITE_CONFIG['member_theme'] in member/libs/site_config.php.
 * Each homepage keeps its own composition, typography and artwork; this file
 * only replaces the common palette and coloured UI surfaces.
 */

html[data-homepage-theme="blue"],
html[data-homepage-theme="blue"] body {
  --bg: #06111d;
  --surface: #0b2134;
  --panel: #0b2134;
  --panel-light: #123752;
  --gold: #36ace8;
  --gold-light: #bcecff;
  --muted: #9eb9c8;
  --text: #f2f9fc;
  --line: rgba(72, 184, 239, .28);
  --hp-accent-rgb: 54, 172, 232;
}

html[data-homepage-theme="green"],
html[data-homepage-theme="green"] body {
  --bg: #07150f;
  --surface: #0c281b;
  --panel: #0c281b;
  --panel-light: #15452f;
  --gold: #32c67a;
  --gold-light: #baf3d3;
  --muted: #9fbdac;
  --text: #f2faf5;
  --line: rgba(54, 200, 124, .28);
  --hp-accent-rgb: 50, 198, 122;
}

html[data-homepage-theme="red"],
html[data-homepage-theme="red"] body {
  --bg: #180809;
  --surface: #301012;
  --panel: #301012;
  --panel-light: #50191d;
  --gold: #e3474f;
  --gold-light: #ffc5c8;
  --muted: #c3a3a5;
  --text: #fff5f5;
  --line: rgba(229, 73, 81, .30);
  --hp-accent-rgb: 227, 71, 79;
}

html[data-homepage-theme="orange"],
html[data-homepage-theme="orange"] body {
  --bg: #1a0d05;
  --surface: #321807;
  --panel: #321807;
  --panel-light: #55280a;
  --gold: #f08a24;
  --gold-light: #ffd5a2;
  --muted: #c8ae94;
  --text: #fff8ef;
  --line: rgba(242, 139, 36, .30);
  --hp-accent-rgb: 240, 138, 36;
}

html[data-homepage-theme="pink"],
html[data-homepage-theme="pink"] body {
  --bg: #180a12;
  --surface: #301020;
  --panel: #301020;
  --panel-light: #501b37;
  --gold: #e85a9d;
  --gold-light: #ffd0e6;
  --muted: #c5a4b4;
  --text: #fff5fa;
  --line: rgba(234, 92, 159, .30);
  --hp-accent-rgb: 232, 90, 157;
}

html[data-homepage-theme="purple"],
html[data-homepage-theme="purple"] body {
  --bg: #11091d;
  --surface: #211139;
  --panel: #211139;
  --panel-light: #38205a;
  --gold: #9b6bea;
  --gold-light: #decaff;
  --muted: #b3a4c8;
  --text: #faf6ff;
  --line: rgba(160, 111, 235, .30);
  --hp-accent-rgb: 155, 107, 234;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body {
  background-color: var(--bg);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) .site-header {
  background: color-mix(in srgb, var(--bg) 94%, transparent) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) :where(.mobile-menu nav, .contact-button, .arena-service-grid > a, .club-service, .reel-card, .slot-mode-card, .spin-service-grid > a) {
  background-color: var(--panel) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) :where(.button-gold, .btn-main) {
  color: #071016;
  border-color: rgba(var(--hp-accent-rgb), .72) !important;
  background: linear-gradient(120deg, var(--gold-light), var(--gold)) !important;
  box-shadow: 0 12px 34px rgba(var(--hp-accent-rgb), .22);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) :where(.button-gold, .btn-main):hover {
  background: linear-gradient(120deg, #fff, var(--gold-light)) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) :where(.topline, .arena-ribbon, .reel-marquee, .spin-marquee) {
  border-color: var(--line);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) :where(.member-section, .arena-members, .noir-members, .club-members, .reel-members, .spin-feature, .spin-members) {
  background-color: color-mix(in srgb, var(--panel) 82%, #000) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) :where(.site-footer, .mobile-actions) {
  background: color-mix(in srgb, var(--bg) 84%, #000) !important;
}

/* Contact colours remain semantic and recognizable in every selected theme. */
html[data-homepage-theme] .contact-line {
  border-color: #168947 !important;
  background: linear-gradient(110deg, #123b24, #18241c) !important;
}

html[data-homepage-theme] .contact-telegram {
  border-color: #267aa5 !important;
  background: linear-gradient(110deg, #153546, #192127) !important;
}

/* Shared neutral surfaces and controls for every non-gold landing design. */
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body .btn-outline {
  border-color: rgba(var(--hp-accent-rgb), .42);
  background-color: color-mix(in srgb, var(--bg) 72%, transparent);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body .btn-outline:hover,
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body .mobile-menu nav a:hover {
  background-color: var(--panel-light);
}

/* Homepage and homepage1: retain the editorial layout, but remove gold leaks. */
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .topline {
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 76%, var(--bg));
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .brand strong,
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) h1 em {
  background: linear-gradient(110deg, var(--gold-light), var(--gold));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .hero-warmth {
  background: radial-gradient(circle, rgba(var(--hp-accent-rgb), .15), transparent 68%);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .hero-categories i {
  background-color: var(--gold);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .game-top span:first-child {
  border-color: rgba(var(--hp-accent-rgb), .45);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) :where(.circle-arrow, .back-top, .mobile-menu summary) {
  color: var(--gold-light);
  border-color: rgba(var(--hp-accent-rgb), .42);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) :where(.circle-arrow:hover, .mobile-menu[open] summary, .mobile-menu nav a:hover) {
  background: var(--panel-light);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) :where(.game-kicker, .game-top span:first-child, .hero-caption strong, .service-row > .hp-icon) {
  color: var(--gold-light);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .game-card:hover {
  border-color: rgba(var(--hp-accent-rgb), .72);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .member-section {
  background: linear-gradient(105deg, color-mix(in srgb, var(--panel) 78%, var(--bg)), color-mix(in srgb, var(--bg) 84%, #000) 75%) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .service-row {
  background: transparent !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) :where(.service-icon, .service-icon-green, .service-icon-blue) {
  color: var(--gold-light) !important;
  border-color: rgba(var(--hp-accent-rgb), .35) !important;
  background: linear-gradient(145deg, var(--panel-light), var(--panel)) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) :where(.member-intro > p:not(.eyebrow), .service-row small, .service-note) {
  color: var(--muted);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body:not([class]) .contact-section {
  background: radial-gradient(ellipse at 85% 15%, rgba(var(--hp-accent-rgb), .12), transparent 52%);
}

/* Homepage2: Arena. */
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-arena :where(.arena-visual, .arena-game) {
  background-color: var(--panel);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-arena .visual-side-label {
  color: var(--gold-light);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-color: var(--line);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-arena .arena-service-grid > a:hover {
  background: var(--panel-light) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-arena .arena-ribbon i {
  color: color-mix(in srgb, var(--bg) 72%, transparent);
}

/* Homepage3: Noir. Dark image masks remain neutral for text legibility. */
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-noir .noir-members {
  background: color-mix(in srgb, var(--panel) 82%, #000) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-noir .noir-hero .btn-outline {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  border-color: rgba(var(--hp-accent-rgb), .42);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-noir .noir-description {
  color: var(--muted);
}

/* Homepage4: Members Club. */
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-club .brand strong {
  color: var(--gold-light);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-club .club-cover-image {
  background: var(--panel);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-club .club-welcome {
  color: #071016;
  background: linear-gradient(145deg, var(--gold-light), var(--gold));
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-club .club-welcome :where(.eyebrow, p:not(.eyebrow), .club-login, .club-login strong) {
  color: color-mix(in srgb, var(--bg) 84%, #000);
  border-color: color-mix(in srgb, var(--bg) 48%, transparent);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-club .club-welcome .btn-dark {
  color: var(--gold-light);
  border-color: var(--bg);
  background: var(--bg);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-club .club-welcome .btn-dark:hover {
  background: var(--panel);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-club .club-service:hover {
  background: var(--panel-light) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-club .club-service-icon {
  color: var(--gold-light);
  background: var(--panel-light);
}

/* Homepage5: Slots Noir. */
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-noir .reel-marquee {
  background: var(--panel);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-noir .reel-marquee > div {
  color: var(--gold-light);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-noir .reel-card-quiet {
  background: linear-gradient(140deg, var(--panel-light), var(--panel)) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-noir .reel-card-quiet::after {
  background: linear-gradient(130deg, transparent, rgba(var(--hp-accent-rgb), .12));
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-noir .reel-journey {
  color: #071016;
  background: linear-gradient(120deg, var(--gold-light), var(--gold));
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-noir .reel-journey :where(.eyebrow, .reel-steps p) {
  color: color-mix(in srgb, var(--bg) 82%, #000);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-noir :where(.reel-steps, .reel-steps li) {
  border-color: color-mix(in srgb, var(--bg) 28%, transparent);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-noir :where(.reel-hero-copy > p:not(.eyebrow), .reel-card p:not(.eyebrow)) {
  color: var(--muted);
}

/* Homepage6: Slots in Motion. */
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-track,
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-feature-copy {
  color: #071016;
  background: linear-gradient(120deg, var(--gold-light), var(--gold));
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-mode:hover {
  background: var(--panel-light);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-feature-copy :where(.eyebrow, p:not(.eyebrow)) {
  color: color-mix(in srgb, var(--bg) 82%, #000);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-feature-copy .btn-main {
  color: var(--gold-light);
  border-color: var(--bg) !important;
  background: var(--bg) !important;
  box-shadow: none;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-members {
  background: color-mix(in srgb, var(--panel) 82%, #000) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-service-grid > a {
  background: var(--panel) !important;
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-service-grid > a > span:first-child {
  color: var(--gold-light);
  background: var(--panel-light);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-image-frame::before,
html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion .spin-image-frame > span {
  color: var(--gold-light);
  border-color: rgba(var(--hp-accent-rgb), .35);
}

html[data-homepage-theme]:not([data-homepage-theme="gold"]) body.theme-slots-motion :where(.spin-feature-art span, .spin-lead) {
  color: var(--muted);
}