/* ============================================================ PALETTES — alternate themes for the site. Activate by setting the `data-theme` attribute on : Each palette overrides the same tokens defined in style.css :root, so layout, components and adaptivity stay untouched. ============================================================ */ /* ============================================================ Crimson — deep red on a clean white background. Sophisticated, high-contrast, casino-friendly. ============================================================ */ [data-theme="crimson"] { /* ---------- Base text / background ---------- */ --color-fg: #1c0d0d; --color-fg-muted: #7a2828; --color-fg-subtle: #5b1a1a; --color-bg: #ffffff; --color-bg-elev: #fff7f7; --color-border: #fadcdc; --color-border-soft: #fdeaea; /* ---------- Brand / accents ---------- */ --color-primary: #b91c1c; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(185, 28, 28, 0.30); /* ---------- Headings ---------- */ --color-h1: #7f1d1d; --color-h2: #b91c1c; --color-h3: #991b1b; --color-h4: #7f1d1d; --color-h5: #5c1414; --color-h6: #4a1010; --color-success: #b91c1c; --color-success-strong: #7f1d1d; --color-neutral-ink: #5c1414; --color-neutral-ink-weak: #fadcdc; /* ---------- Header / Nav ---------- */ --topbar-bg: #ffffff; --topbar-ink: #7f1d1d; --subnav-bg: #7f1d1d; --subnav-link: #fadcdc; --subnav-link-hover: #ffffff; --topnav-bg: #fff7f7; /* ---------- Buttons (legacy primary) ---------- */ --btn-primary-bg: #b91c1c; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #7f1d1d; --btn-secondary-bg: #4b1414; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #2a0a0a; --btn-shadow: 0 4px 15px rgba(185, 28, 28, 0.25); --btn-shadow-hover: 0 6px 20px rgba(185, 28, 28, 0.35); /* Premium gold button — keep gold for the CTA so it still pops on red brand */ --btn-premium-fg: #1c0d0d; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(201, 151, 42, 0.35); --btn-premium-shadow-hover: 0 14px 34px rgba(201, 151, 42, 0.45); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); /* ---------- Tables ---------- */ --table-bg: #ffffff; --table-border: #fadcdc; --table-head-bg: #fff7f7; --table-head-accent: #b91c1c; --table-row-hover: #fff1f1; --table-col-separator: #b91c1c; /* ---------- Generic cards (legacy grid layout) ---------- */ --card-bg: #ffffff; --card-border: #fadcdc; --card-shadow: 0 4px 20px rgba(185, 28, 28, 0.08); --card-shadow-hover: 0 8px 30px rgba(185, 28, 28, 0.12); /* Star rating stays gold — readable on white, signals quality */ --rating-star-empty: #f4d8d8; --rating-star-filled: #f1c40f; /* Exclusive badge — gold border on white, classy */ --exclusive-border: 2px solid #c9972a; --exclusive-badge-bg: #b91c1c; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #d1d5db; --badge-top3: #cd7f32; /* ---------- Misc ---------- */ --shadow-soft: 0 2px 10px rgba(28, 13, 13, 0.06); --shadow-strong: 0 4px 20px rgba(28, 13, 13, 0.10); --focus-outline: 2px solid #b91c1c; /* ============================================================ Semantic palette (used by review cards, lists, pros/cons) Re-route the neutrals & accents to fit the crimson theme. */ --c-success: #16a34a; /* keep green for "money / bonus" */ --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #b91c1c; /* matches brand */ --c-info: #b91c1c; /* re-route info to brand red */ --c-info-soft: #fde2e2; --c-info-soft-2: #fac6c6; --c-info-strong: #7f1d1d; --c-info-light: #f5a3a3; --c-warning: #f59e0b; --c-neutral-text: #1c0d0d; --c-neutral-text-muted: rgba(28, 13, 13, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #fff7f7; --c-neutral-border: rgba(127, 29, 29, 0.12); --c-neutral-divider: rgba(127, 29, 29, 0.10); --c-neutral-shadow: rgba(127, 29, 29, 0.10); --c-neutral-shadow-strong: rgba(127, 29, 29, 0.18); /* ---------- Review card overrides ---------- */ --rc-pos-border: rgba(127, 29, 29, 0.30); --rc-star-off: rgba(127, 29, 29, 0.20); /* Exclusive badge inside rev-card — gold pill on white */ --rc-excl-bg: rgba(201, 151, 42, 0.12); --rc-excl-fg: #8b6914; --rc-excl-border: rgba(201, 151, 42, 0.45); /* "Read review" button — soft red */ --rc-review-btn-bg: #fde2e2; --rc-review-btn-border: #fac6c6; --rc-review-btn-fg: #7f1d1d; --rc-review-btn-bg-hover: #fac6c6; --rc-review-btn-border-hover: #f5a3a3; /* "Play now" — strong red CTA */ --rc-play-btn-bg: #b91c1c; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #7f1d1d; /* Bonus stays green for that money feel; switch the next line to var(--c-danger) if you want red instead. */ /* --rc-accent: var(--c-danger); */ /* ---------- Lists ---------- */ --list-card-border-hover: rgba(127, 29, 29, 0.22); --list-bullet-bg: var(--c-success); /* green check on white still reads well */ --list-counter-bg: #b91c1c; --list-counter-shadow: 0 2px 6px rgba(185, 28, 28, 0.30); /* ---------- Pros & Cons ---------- */ --pc-pros: #16a34a; --pc-cons: #b91c1c; } /* ============================================================ Azure — bright sky blue brand on a clean white background. Crisp, modern, fintech-flavoured. ============================================================ */ [data-theme="azure"] { /* ---------- Base text / background ---------- */ --color-fg: #0c1a2b; --color-fg-muted: #4b6b8a; --color-fg-subtle: #2c4a6b; --color-bg: #ffffff; --color-bg-elev: #f0f9ff; --color-border: #d6ecfb; --color-border-soft: #e8f4fc; /* ---------- Brand / accents ---------- */ --color-primary: #0ea5e9; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(14, 165, 233, 0.30); /* ---------- Headings ---------- */ --color-h1: #075985; --color-h2: #0369a1; --color-h3: #0284c7; --color-h4: #0369a1; --color-h5: #0c4a6e; --color-h6: #082f49; --color-success: #0ea5e9; --color-success-strong: #0369a1; --color-neutral-ink: #0c4a6e; --color-neutral-ink-weak: #d6ecfb; /* ---------- Header / Nav ---------- */ --topbar-bg: #ffffff; --topbar-ink: #075985; --subnav-bg: #075985; --subnav-link: #d6ecfb; --subnav-link-hover: #ffffff; --topnav-bg: #f0f9ff; /* ---------- Buttons (legacy primary) ---------- Use a deeper navy for the button background — white text needs strong contrast and the bright sky tone (#0ea5e9) is too light for that. */ --btn-primary-bg: #075985; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #0c4a6e; --btn-secondary-bg: #475569; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #334155; --btn-shadow: 0 4px 15px rgba(7, 89, 133, 0.30); --btn-shadow-hover: 0 6px 20px rgba(7, 89, 133, 0.40); /* Premium gold button — keeps gold to stand out against blue brand */ --btn-premium-fg: #0c1a2b; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(201, 151, 42, 0.35); --btn-premium-shadow-hover: 0 14px 34px rgba(201, 151, 42, 0.45); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); /* ---------- Tables ---------- */ --table-bg: #ffffff; --table-border: #d6ecfb; --table-head-bg: #f0f9ff; --table-head-accent: #0ea5e9; --table-row-hover: #e8f4fc; --table-col-separator: #0ea5e9; /* ---------- Generic cards (legacy grid layout) ---------- */ --card-bg: #ffffff; --card-border: #d6ecfb; --card-shadow: 0 4px 20px rgba(14, 165, 233, 0.08); --card-shadow-hover: 0 8px 30px rgba(14, 165, 233, 0.14); --rating-star-empty: #e0eef9; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #0ea5e9; --exclusive-badge-bg: #0284c7; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #cbd5e1; --badge-top3: #cd7f32; /* ---------- Misc ---------- */ --shadow-soft: 0 2px 10px rgba(12, 26, 43, 0.06); --shadow-strong: 0 4px 20px rgba(12, 26, 43, 0.10); --focus-outline: 2px solid #0ea5e9; /* ============================================================ Semantic palette */ --c-success: #16a34a; --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #dc2626; --c-info: #0ea5e9; --c-info-soft: #e0f2fe; --c-info-soft-2: #bae6fd; --c-info-strong: #075985; --c-info-light: #7dd3fc; --c-warning: #f59e0b; --c-neutral-text: #0c1a2b; --c-neutral-text-muted: rgba(12, 26, 43, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #f0f9ff; --c-neutral-border: rgba(7, 89, 133, 0.12); --c-neutral-divider: rgba(7, 89, 133, 0.10); --c-neutral-shadow: rgba(7, 89, 133, 0.10); --c-neutral-shadow-strong: rgba(7, 89, 133, 0.18); /* ---------- Review card overrides ---------- */ --rc-pos-border: rgba(7, 89, 133, 0.30); --rc-star-off: rgba(7, 89, 133, 0.20); /* Exclusive badge — sky blue pill on white */ --rc-excl-bg: rgba(14, 165, 233, 0.12); --rc-excl-fg: #0369a1; --rc-excl-border: rgba(14, 165, 233, 0.40); /* "Read review" — pastel sky */ --rc-review-btn-bg: #e0f2fe; --rc-review-btn-border: #bae6fd; --rc-review-btn-fg: #075985; --rc-review-btn-bg-hover: #bae6fd; --rc-review-btn-border-hover: #7dd3fc; /* "Play now" — saturated blue, white text reads cleanly */ --rc-play-btn-bg: #0369a1; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #075985; /* ---------- Lists ---------- */ --list-card-border-hover: rgba(7, 89, 133, 0.22); --list-bullet-bg: var(--c-success); --list-counter-bg: #0ea5e9; --list-counter-shadow: 0 2px 6px rgba(14, 165, 233, 0.30); /* ---------- Pros & Cons ---------- */ --pc-pros: #16a34a; --pc-cons: #dc2626; } /* ============================================================ Emerald — fresh green brand on a clean white background. Growth / "money" feel, great for bonus-heavy sites. ============================================================ */ [data-theme="emerald"] { --color-fg: #052e20; --color-fg-muted: #3f7a63; --color-fg-subtle: #1f5c46; --color-bg: #ffffff; --color-bg-elev: #f0fdf4; --color-border: #cdeede; --color-border-soft: #e3f7ec; --color-primary: #059669; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(5, 150, 105, 0.30); --color-h1: #065f46; --color-h2: #047857; --color-h3: #059669; --color-h4: #047857; --color-h5: #064e3b; --color-h6: #052e20; --color-success: #059669; --color-success-strong: #047857; --color-neutral-ink: #064e3b; --color-neutral-ink-weak: #cdeede; --topbar-bg: #ffffff; --topbar-ink: #065f46; --subnav-bg: #065f46; --subnav-link: #cdeede; --subnav-link-hover: #ffffff; --topnav-bg: #f0fdf4; --btn-primary-bg: #059669; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #047857; --btn-secondary-bg: #334155; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #1e293b; --btn-shadow: 0 4px 15px rgba(5, 150, 105, 0.25); --btn-shadow-hover: 0 6px 20px rgba(5, 150, 105, 0.35); --btn-premium-fg: #052e20; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(201, 151, 42, 0.35); --btn-premium-shadow-hover: 0 14px 34px rgba(201, 151, 42, 0.45); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); --table-bg: #ffffff; --table-border: #cdeede; --table-head-bg: #f0fdf4; --table-head-accent: #059669; --table-row-hover: #ecfdf5; --table-col-separator: #059669; --card-bg: #ffffff; --card-border: #cdeede; --card-shadow: 0 4px 20px rgba(5, 150, 105, 0.08); --card-shadow-hover: 0 8px 30px rgba(5, 150, 105, 0.12); --rating-star-empty: #d6efe1; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #059669; --exclusive-badge-bg: #047857; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #cbd5e1; --badge-top3: #cd7f32; --shadow-soft: 0 2px 10px rgba(5, 46, 32, 0.06); --shadow-strong: 0 4px 20px rgba(5, 46, 32, 0.10); --focus-outline: 2px solid #059669; --c-success: #16a34a; --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #dc2626; --c-info: #059669; --c-info-soft: #d1fae5; --c-info-soft-2: #a7f3d0; --c-info-strong: #065f46; --c-info-light: #6ee7b7; --c-warning: #f59e0b; --c-neutral-text: #052e20; --c-neutral-text-muted: rgba(5, 46, 32, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #f0fdf4; --c-neutral-border: rgba(6, 95, 70, 0.12); --c-neutral-divider: rgba(6, 95, 70, 0.10); --c-neutral-shadow: rgba(6, 95, 70, 0.10); --c-neutral-shadow-strong: rgba(6, 95, 70, 0.18); --rc-pos-border: rgba(6, 95, 70, 0.30); --rc-star-off: rgba(6, 95, 70, 0.20); --rc-excl-bg: rgba(5, 150, 105, 0.12); --rc-excl-fg: #047857; --rc-excl-border: rgba(5, 150, 105, 0.40); --rc-review-btn-bg: #d1fae5; --rc-review-btn-border: #a7f3d0; --rc-review-btn-fg: #065f46; --rc-review-btn-bg-hover: #a7f3d0; --rc-review-btn-border-hover: #6ee7b7; --rc-play-btn-bg: #059669; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #047857; --list-card-border-hover: rgba(6, 95, 70, 0.22); --list-bullet-bg: var(--c-success); --list-counter-bg: #059669; --list-counter-shadow: 0 2px 6px rgba(5, 150, 105, 0.30); --pc-pros: #16a34a; --pc-cons: #dc2626; } /* ============================================================ Violet — modern purple brand on white. Premium, techy. ============================================================ */ [data-theme="violet"] { --color-fg: #1c1233; --color-fg-muted: #6d5b96; --color-fg-subtle: #43356f; --color-bg: #ffffff; --color-bg-elev: #faf5ff; --color-border: #e9d5ff; --color-border-soft: #f3e8ff; --color-primary: #7c3aed; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(124, 58, 237, 0.30); --color-h1: #5b21b6; --color-h2: #6d28d9; --color-h3: #7c3aed; --color-h4: #6d28d9; --color-h5: #4c1d95; --color-h6: #3b0764; --color-success: #7c3aed; --color-success-strong: #6d28d9; --color-neutral-ink: #4c1d95; --color-neutral-ink-weak: #e9d5ff; --topbar-bg: #ffffff; --topbar-ink: #5b21b6; --subnav-bg: #5b21b6; --subnav-link: #e9d5ff; --subnav-link-hover: #ffffff; --topnav-bg: #faf5ff; --btn-primary-bg: #7c3aed; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #6d28d9; --btn-secondary-bg: #475569; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #334155; --btn-shadow: 0 4px 15px rgba(124, 58, 237, 0.25); --btn-shadow-hover: 0 6px 20px rgba(124, 58, 237, 0.35); --btn-premium-fg: #1c1233; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(201, 151, 42, 0.35); --btn-premium-shadow-hover: 0 14px 34px rgba(201, 151, 42, 0.45); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); --table-bg: #ffffff; --table-border: #e9d5ff; --table-head-bg: #faf5ff; --table-head-accent: #7c3aed; --table-row-hover: #f5edff; --table-col-separator: #7c3aed; --card-bg: #ffffff; --card-border: #e9d5ff; --card-shadow: 0 4px 20px rgba(124, 58, 237, 0.08); --card-shadow-hover: 0 8px 30px rgba(124, 58, 237, 0.12); --rating-star-empty: #ece0fb; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #7c3aed; --exclusive-badge-bg: #6d28d9; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #cbd5e1; --badge-top3: #cd7f32; --shadow-soft: 0 2px 10px rgba(28, 18, 51, 0.06); --shadow-strong: 0 4px 20px rgba(28, 18, 51, 0.10); --focus-outline: 2px solid #7c3aed; --c-success: #16a34a; --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #dc2626; --c-info: #7c3aed; --c-info-soft: #ede9fe; --c-info-soft-2: #ddd6fe; --c-info-strong: #5b21b6; --c-info-light: #c4b5fd; --c-warning: #f59e0b; --c-neutral-text: #1c1233; --c-neutral-text-muted: rgba(28, 18, 51, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #faf5ff; --c-neutral-border: rgba(91, 33, 182, 0.12); --c-neutral-divider: rgba(91, 33, 182, 0.10); --c-neutral-shadow: rgba(91, 33, 182, 0.10); --c-neutral-shadow-strong: rgba(91, 33, 182, 0.18); --rc-pos-border: rgba(91, 33, 182, 0.30); --rc-star-off: rgba(91, 33, 182, 0.20); --rc-excl-bg: rgba(124, 58, 237, 0.12); --rc-excl-fg: #6d28d9; --rc-excl-border: rgba(124, 58, 237, 0.40); --rc-review-btn-bg: #ede9fe; --rc-review-btn-border: #ddd6fe; --rc-review-btn-fg: #5b21b6; --rc-review-btn-bg-hover: #ddd6fe; --rc-review-btn-border-hover: #c4b5fd; --rc-play-btn-bg: #6d28d9; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #5b21b6; --list-card-border-hover: rgba(91, 33, 182, 0.22); --list-bullet-bg: var(--c-success); --list-counter-bg: #7c3aed; --list-counter-shadow: 0 2px 6px rgba(124, 58, 237, 0.30); --pc-pros: #16a34a; --pc-cons: #dc2626; } /* ============================================================ Teal — calm teal/cyan brand on white. Clean, trustworthy. ============================================================ */ [data-theme="teal"] { --color-fg: #04231f; --color-fg-muted: #3e7d75; --color-fg-subtle: #1f5f57; --color-bg: #ffffff; --color-bg-elev: #f0fdfa; --color-border: #cceee9; --color-border-soft: #e2f7f4; --color-primary: #0d9488; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(13, 148, 136, 0.30); --color-h1: #115e59; --color-h2: #0f766e; --color-h3: #0d9488; --color-h4: #0f766e; --color-h5: #134e4a; --color-h6: #042f2a; --color-success: #0d9488; --color-success-strong: #0f766e; --color-neutral-ink: #134e4a; --color-neutral-ink-weak: #cceee9; --topbar-bg: #ffffff; --topbar-ink: #115e59; --subnav-bg: #115e59; --subnav-link: #cceee9; --subnav-link-hover: #ffffff; --topnav-bg: #f0fdfa; --btn-primary-bg: #0d9488; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #0f766e; --btn-secondary-bg: #475569; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #334155; --btn-shadow: 0 4px 15px rgba(13, 148, 136, 0.25); --btn-shadow-hover: 0 6px 20px rgba(13, 148, 136, 0.35); --btn-premium-fg: #04231f; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(201, 151, 42, 0.35); --btn-premium-shadow-hover: 0 14px 34px rgba(201, 151, 42, 0.45); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); --table-bg: #ffffff; --table-border: #cceee9; --table-head-bg: #f0fdfa; --table-head-accent: #0d9488; --table-row-hover: #eafcf9; --table-col-separator: #0d9488; --card-bg: #ffffff; --card-border: #cceee9; --card-shadow: 0 4px 20px rgba(13, 148, 136, 0.08); --card-shadow-hover: 0 8px 30px rgba(13, 148, 136, 0.12); --rating-star-empty: #d3efec; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #0d9488; --exclusive-badge-bg: #0f766e; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #cbd5e1; --badge-top3: #cd7f32; --shadow-soft: 0 2px 10px rgba(4, 35, 31, 0.06); --shadow-strong: 0 4px 20px rgba(4, 35, 31, 0.10); --focus-outline: 2px solid #0d9488; --c-success: #16a34a; --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #dc2626; --c-info: #0d9488; --c-info-soft: #ccfbf1; --c-info-soft-2: #99f6e4; --c-info-strong: #115e59; --c-info-light: #5eead4; --c-warning: #f59e0b; --c-neutral-text: #04231f; --c-neutral-text-muted: rgba(4, 35, 31, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #f0fdfa; --c-neutral-border: rgba(17, 94, 89, 0.12); --c-neutral-divider: rgba(17, 94, 89, 0.10); --c-neutral-shadow: rgba(17, 94, 89, 0.10); --c-neutral-shadow-strong: rgba(17, 94, 89, 0.18); --rc-pos-border: rgba(17, 94, 89, 0.30); --rc-star-off: rgba(17, 94, 89, 0.20); --rc-excl-bg: rgba(13, 148, 136, 0.12); --rc-excl-fg: #0f766e; --rc-excl-border: rgba(13, 148, 136, 0.40); --rc-review-btn-bg: #ccfbf1; --rc-review-btn-border: #99f6e4; --rc-review-btn-fg: #115e59; --rc-review-btn-bg-hover: #99f6e4; --rc-review-btn-border-hover: #5eead4; --rc-play-btn-bg: #0f766e; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #115e59; --list-card-border-hover: rgba(17, 94, 89, 0.22); --list-bullet-bg: var(--c-success); --list-counter-bg: #0d9488; --list-counter-shadow: 0 2px 6px rgba(13, 148, 136, 0.30); --pc-pros: #16a34a; --pc-cons: #dc2626; } /* ============================================================ Rose — vivid pink/magenta brand on white. Bold, playful. ============================================================ */ [data-theme="rose"] { --color-fg: #2b0a14; --color-fg-muted: #9a4257; --color-fg-subtle: #74132c; --color-bg: #ffffff; --color-bg-elev: #fff1f4; --color-border: #fbd0da; --color-border-soft: #fde4e9; --color-primary: #e11d48; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(225, 29, 72, 0.30); --color-h1: #9f1239; --color-h2: #be123c; --color-h3: #e11d48; --color-h4: #be123c; --color-h5: #881337; --color-h6: #4c0519; --color-success: #e11d48; --color-success-strong: #be123c; --color-neutral-ink: #881337; --color-neutral-ink-weak: #fbd0da; --topbar-bg: #ffffff; --topbar-ink: #9f1239; --subnav-bg: #9f1239; --subnav-link: #fbd0da; --subnav-link-hover: #ffffff; --topnav-bg: #fff1f4; --btn-primary-bg: #e11d48; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #be123c; --btn-secondary-bg: #475569; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #334155; --btn-shadow: 0 4px 15px rgba(225, 29, 72, 0.25); --btn-shadow-hover: 0 6px 20px rgba(225, 29, 72, 0.35); --btn-premium-fg: #2b0a14; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(201, 151, 42, 0.35); --btn-premium-shadow-hover: 0 14px 34px rgba(201, 151, 42, 0.45); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); --table-bg: #ffffff; --table-border: #fbd0da; --table-head-bg: #fff1f4; --table-head-accent: #e11d48; --table-row-hover: #ffe4ea; --table-col-separator: #e11d48; --card-bg: #ffffff; --card-border: #fbd0da; --card-shadow: 0 4px 20px rgba(225, 29, 72, 0.08); --card-shadow-hover: 0 8px 30px rgba(225, 29, 72, 0.12); --rating-star-empty: #f7d6de; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #e11d48; --exclusive-badge-bg: #be123c; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #cbd5e1; --badge-top3: #cd7f32; --shadow-soft: 0 2px 10px rgba(43, 10, 20, 0.06); --shadow-strong: 0 4px 20px rgba(43, 10, 20, 0.10); --focus-outline: 2px solid #e11d48; --c-success: #16a34a; --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #be123c; --c-info: #e11d48; --c-info-soft: #ffe4e9; --c-info-soft-2: #fecdd3; --c-info-strong: #9f1239; --c-info-light: #fda4af; --c-warning: #f59e0b; --c-neutral-text: #2b0a14; --c-neutral-text-muted: rgba(43, 10, 20, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #fff1f4; --c-neutral-border: rgba(159, 18, 57, 0.12); --c-neutral-divider: rgba(159, 18, 57, 0.10); --c-neutral-shadow: rgba(159, 18, 57, 0.10); --c-neutral-shadow-strong: rgba(159, 18, 57, 0.18); --rc-pos-border: rgba(159, 18, 57, 0.30); --rc-star-off: rgba(159, 18, 57, 0.20); --rc-excl-bg: rgba(225, 29, 72, 0.12); --rc-excl-fg: #be123c; --rc-excl-border: rgba(225, 29, 72, 0.40); --rc-review-btn-bg: #ffe4e9; --rc-review-btn-border: #fecdd3; --rc-review-btn-fg: #9f1239; --rc-review-btn-bg-hover: #fecdd3; --rc-review-btn-border-hover: #fda4af; --rc-play-btn-bg: #be123c; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #9f1239; --list-card-border-hover: rgba(159, 18, 57, 0.22); --list-bullet-bg: var(--c-success); --list-counter-bg: #e11d48; --list-counter-shadow: 0 2px 6px rgba(225, 29, 72, 0.30); --pc-pros: #16a34a; --pc-cons: #be123c; } /* ============================================================ Midnight — dark mode. Deep navy surfaces, bright sky accent. Cards, tables and nav switch to dark surfaces automatically (they read the same --card-bg / --table-bg tokens). ============================================================ */ [data-theme="midnight"] { --color-fg: #e2e8f0; --color-fg-muted: #94a3b8; --color-fg-subtle: #cbd5e1; --color-bg: #0f172a; --color-bg-elev: #1e293b; --color-border: #334155; --color-border-soft: #263243; --color-primary: #38bdf8; --color-primary-ink: #05233a; --color-primary-shadow: rgba(56, 189, 248, 0.30); --color-h1: #e0f2fe; --color-h2: #bae6fd; --color-h3: #7dd3fc; --color-h4: #bae6fd; --color-h5: #7dd3fc; --color-h6: #38bdf8; --color-success: #38bdf8; --color-success-strong: #0ea5e9; --color-neutral-ink: #e2e8f0; --color-neutral-ink-weak: #334155; --topbar-bg: #0b1220; --topbar-ink: #e2e8f0; --subnav-bg: #1e293b; --subnav-link: #cbd5e1; --subnav-link-hover: #ffffff; --topnav-bg: #0b1220; --btn-primary-bg: #0ea5e9; --btn-primary-fg: #05233a; --btn-primary-bg-hover: #38bdf8; --btn-secondary-bg: #334155; --btn-secondary-fg: #e2e8f0; --btn-secondary-bg-hover: #475569; --btn-shadow: 0 4px 15px rgba(2, 132, 199, 0.35); --btn-shadow-hover: 0 6px 20px rgba(2, 132, 199, 0.45); --btn-premium-fg: #1c1206; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.55); --btn-premium-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); --btn-premium-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.55); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.28); --table-bg: #1e293b; --table-border: #334155; --table-head-bg: #0b1220; --table-head-accent: #38bdf8; --table-row-hover: #243244; --table-col-separator: #38bdf8; --card-bg: #1e293b; --card-border: #334155; --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.40); --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.50); --rating-star-empty: #334155; --rating-star-filled: #fbbf24; --exclusive-border: 2px solid #38bdf8; --exclusive-badge-bg: #0ea5e9; --exclusive-badge-fg: #05233a; --badge-top1: #fbbf24; --badge-top2: #94a3b8; --badge-top3: #b45309; --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.40); --shadow-strong: 0 4px 20px rgba(0, 0, 0, 0.55); --focus-outline: 2px solid #38bdf8; --c-success: #22c55e; --c-success-strong: #16a34a; --c-success-soft: rgba(34, 197, 94, 0.18); --c-danger: #f87171; --c-info: #38bdf8; --c-info-soft: rgba(56, 189, 248, 0.15); --c-info-soft-2: rgba(56, 189, 248, 0.25); --c-info-strong: #7dd3fc; --c-info-light: #7dd3fc; --c-warning: #fbbf24; --c-neutral-text: #e2e8f0; --c-neutral-text-muted: rgba(226, 232, 240, 0.65); --c-neutral-bg: #1e293b; --c-neutral-bg-elev: #243244; --c-neutral-border: rgba(148, 163, 184, 0.20); --c-neutral-divider: rgba(148, 163, 184, 0.14); --c-neutral-shadow: rgba(0, 0, 0, 0.40); --c-neutral-shadow-strong: rgba(0, 0, 0, 0.55); --rc-pos-border: rgba(148, 163, 184, 0.30); --rc-star-off: rgba(148, 163, 184, 0.25); --rc-excl-bg: rgba(56, 189, 248, 0.15); --rc-excl-fg: #7dd3fc; --rc-excl-border: rgba(56, 189, 248, 0.45); --rc-review-btn-bg: #243244; --rc-review-btn-border: #334155; --rc-review-btn-fg: #cbd5e1; --rc-review-btn-bg-hover: #334155; --rc-review-btn-border-hover: #475569; --rc-play-btn-bg: #0ea5e9; --rc-play-btn-fg: #05233a; --rc-play-btn-bg-hover: #38bdf8; --list-card-border-hover: rgba(148, 163, 184, 0.30); --list-bullet-bg: var(--c-success); --list-counter-bg: #0ea5e9; --list-counter-shadow: 0 2px 6px rgba(2, 132, 199, 0.40); --pc-pros: #22c55e; --pc-cons: #f87171; } /* ============================================================ Onyx — luxury dark. Near-black surfaces with a gold brand. Classic high-roller casino look. ============================================================ */ [data-theme="onyx"] { --color-fg: #f5f0e6; --color-fg-muted: #b8a98c; --color-fg-subtle: #d8cbb0; --color-bg: #0d0d0f; --color-bg-elev: #17171b; --color-border: #2a2a30; --color-border-soft: #201f24; --color-primary: #d4af37; --color-primary-ink: #1a1508; --color-primary-shadow: rgba(212, 175, 55, 0.35); --color-h1: #f0d67a; --color-h2: #e6c65c; --color-h3: #d4af37; --color-h4: #e6c65c; --color-h5: #c8a02e; --color-h6: #b8901f; --color-success: #d4af37; --color-success-strong: #c8a02e; --color-neutral-ink: #f5f0e6; --color-neutral-ink-weak: #2a2a30; --topbar-bg: #0b0b0d; --topbar-ink: #f0d67a; --subnav-bg: #17171b; --subnav-link: #d8cbb0; --subnav-link-hover: #f0d67a; --topnav-bg: #0b0b0d; --btn-primary-bg: #d4af37; --btn-primary-fg: #1a1508; --btn-primary-bg-hover: #e6c65c; --btn-secondary-bg: #2a2a30; --btn-secondary-fg: #f5f0e6; --btn-secondary-bg-hover: #3a3a42; --btn-shadow: 0 4px 15px rgba(212, 175, 55, 0.30); --btn-shadow-hover: 0 6px 20px rgba(212, 175, 55, 0.40); --btn-premium-fg: #1a1508; --btn-premium-bg-1: #fff3b0; --btn-premium-bg-2: #f7d36a; --btn-premium-bg-3: #c9972a; --btn-premium-border: rgba(201, 151, 42, 0.65); --btn-premium-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); --btn-premium-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.65); --btn-premium-glow: 0 0 0 3px rgba(247, 211, 106, 0.30); --table-bg: #17171b; --table-border: #2a2a30; --table-head-bg: #0b0b0d; --table-head-accent: #d4af37; --table-row-hover: #201f24; --table-col-separator: #d4af37; --card-bg: #17171b; --card-border: #2a2a30; --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); --card-shadow-hover: 0 8px 30px rgba(212, 175, 55, 0.14); --rating-star-empty: #2a2a30; --rating-star-filled: #d4af37; --exclusive-border: 2px solid #d4af37; --exclusive-badge-bg: #d4af37; --exclusive-badge-fg: #1a1508; --badge-top1: #d4af37; --badge-top2: #b8b8c0; --badge-top3: #cd7f32; --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.55); --shadow-strong: 0 4px 20px rgba(0, 0, 0, 0.65); --focus-outline: 2px solid #d4af37; --c-success: #22c55e; --c-success-strong: #16a34a; --c-success-soft: rgba(34, 197, 94, 0.16); --c-danger: #f87171; --c-info: #d4af37; --c-info-soft: rgba(212, 175, 55, 0.14); --c-info-soft-2: rgba(212, 175, 55, 0.24); --c-info-strong: #f0d67a; --c-info-light: #e6c65c; --c-warning: #fbbf24; --c-neutral-text: #f5f0e6; --c-neutral-text-muted: rgba(245, 240, 230, 0.62); --c-neutral-bg: #17171b; --c-neutral-bg-elev: #201f24; --c-neutral-border: rgba(212, 175, 55, 0.18); --c-neutral-divider: rgba(212, 175, 55, 0.12); --c-neutral-shadow: rgba(0, 0, 0, 0.55); --c-neutral-shadow-strong: rgba(0, 0, 0, 0.65); --rc-pos-border: rgba(212, 175, 55, 0.30); --rc-star-off: rgba(212, 175, 55, 0.22); --rc-excl-bg: rgba(212, 175, 55, 0.14); --rc-excl-fg: #f0d67a; --rc-excl-border: rgba(212, 175, 55, 0.45); --rc-review-btn-bg: #201f24; --rc-review-btn-border: #2a2a30; --rc-review-btn-fg: #d8cbb0; --rc-review-btn-bg-hover: #2a2a30; --rc-review-btn-border-hover: #3a3a42; --rc-play-btn-bg: #d4af37; --rc-play-btn-fg: #1a1508; --rc-play-btn-bg-hover: #e6c65c; --list-card-border-hover: rgba(212, 175, 55, 0.30); --list-bullet-bg: var(--c-success); --list-counter-bg: #d4af37; --list-counter-shadow: 0 2px 6px rgba(212, 175, 55, 0.35); --pc-pros: #22c55e; --pc-cons: #f87171; }