/* ============================================================ PALETTES — light themes for the site. Activate by setting `site.site_colors` in data/site.yaml; the layouts stamp it onto . Available: amber, azure, teal, violet, crimson. Each palette overrides EVERY colour token defined in style.css :root — including the review-grid tokens (--rc-*), the pros/cons tokens (--pc-*) and the list tokens (--list-*). Nothing falls back to the neutral default, so a palette fully owns the page. Non-colour tokens (fonts, radii, logo sizes) stay in style.css. Generated — keep the palettes in sync by editing all five blocks. ============================================================ */ /* ============================================================ Amber — warm orange brand on white. Energetic, classic casino. ============================================================ */ [data-theme="amber"] { /* ---------- Base text / background ---------- */ --color-fg: #1f1206; --color-fg-muted: #8a5a2b; --color-fg-subtle: #6b4218; --color-bg: #ffffff; --color-bg-elev: #fff8f1; --color-border: #fbe0c4; --color-border-soft: #fdefe0; /* ---------- Brand / accents ---------- */ --color-primary: #e67e22; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(230, 126, 34, 0.30); /* ---------- Headings ---------- */ --color-h1: #ba4a00; --color-h2: #e67e22; --color-h3: #d35400; --color-h4: #ba4a00; --color-h5: #8a3800; --color-h6: #6b2c00; --color-success: #e67e22; --color-success-strong: #9a3412; --color-neutral-ink: #8a3800; --color-neutral-ink-weak: #fbe0c4; /* ---------- Header / Nav ---------- */ --topbar-bg: #ffffff; --topbar-ink: #ba4a00; --subnav-bg: #d35400; --subnav-link: #fdebd0; --subnav-link-hover: #ffffff; --topnav-bg: #fff8f1; /* ---------- Buttons (legacy primary) ---------- Button background is a darker step than --color-primary so white label text keeps a >=4.5:1 contrast ratio. */ --btn-primary-bg: #c2410c; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #9a3412; --btn-secondary-bg: #8a3800; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #6b2c00; --btn-shadow: 0 4px 15px rgba(194, 65, 12, 0.25); --btn-shadow-hover: 0 6px 20px rgba(194, 65, 12, 0.35); /* Premium gold CTA — identical across palettes so it always pops. */ --btn-premium-fg: #1f1206; --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: #fbe0c4; --table-head-bg: #fff8f1; --table-head-accent: #e67e22; --table-row-hover: #fdefe0; --table-col-separator: #e67e22; /* ---------- Generic cards (legacy grid layout) ---------- */ --card-bg: #ffffff; --card-border: #fbe0c4; --card-shadow: 0 4px 20px rgba(230, 126, 34, 0.08); --card-shadow-hover: 0 8px 30px rgba(230, 126, 34, 0.14); --rating-star-empty: #fbe0c4; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #e67e22; --exclusive-badge-bg: #c2410c; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #d1d5db; --badge-top3: #cd7f32; /* ---------- Misc ---------- */ --shadow-soft: 0 2px 10px rgba(31, 18, 6, 0.06); --shadow-strong: 0 4px 20px rgba(31, 18, 6, 0.10); --focus-outline: 2px solid #e67e22; /* ============================================================ Semantic palette (review cards, lists, pros/cons) ============================================================ */ --c-success: #16a34a; --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #dc2626; --c-info: #e67e22; --c-info-soft: #ffedd5; --c-info-soft-2: #fed7aa; --c-info-strong: #9a3412; --c-info-light: #fdba74; --c-warning: #f59e0b; --c-neutral-text: #1f1206; --c-neutral-text-muted: rgba(31, 18, 6, 0.60); --c-neutral-bg: #ffffff; --c-neutral-bg-elev: #fff8f1; --c-neutral-border: rgba(154, 52, 18, 0.12); --c-neutral-divider: rgba(154, 52, 18, 0.10); --c-neutral-shadow: rgba(154, 52, 18, 0.10); --c-neutral-shadow-strong: rgba(154, 52, 18, 0.18); /* ============================================================ Review grid — every card token stated explicitly. ============================================================ */ --rc-bg: #ffffff; --rc-bg-elev: #fff8f1; --rc-border: rgba(154, 52, 18, 0.12); --rc-divider: rgba(154, 52, 18, 0.10); --rc-fg: #1f1206; --rc-fg-muted: rgba(31, 18, 6, 0.60); /* Bonus figure stays green in every palette — money reads as green. */ --rc-accent: #16a34a; --rc-accent-soft: rgba(22, 163, 74, 0.14); --rc-accent-strong: #15803d; --rc-star-on: #f1c40f; --rc-star-off: rgba(154, 52, 18, 0.20); --rc-pos-border: rgba(154, 52, 18, 0.30); --rc-excl-bg: rgba(230, 126, 34, 0.12); --rc-excl-fg: #e67e22; --rc-excl-border: rgba(230, 126, 34, 0.40); /* "Read review" — pastel tint of the brand hue */ --rc-review-btn-bg: #ffedd5; --rc-review-btn-border: #fed7aa; --rc-review-btn-fg: #9a3412; --rc-review-btn-bg-hover: #fed7aa; --rc-review-btn-border-hover: #fdba74; /* "Play now" — saturated brand hue, white label */ --rc-play-btn-bg: #c2410c; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #9a3412; --rc-shadow: 0 4px 16px rgba(154, 52, 18, 0.10); --rc-shadow-hover: 0 6px 22px rgba(154, 52, 18, 0.18); /* ---------- Lists ---------- */ --list-card-bg: #fff8f1; --list-card-border: rgba(154, 52, 18, 0.12); --list-card-border-hover: rgba(154, 52, 18, 0.22); --list-card-shadow: 0 2px 8px rgba(154, 52, 18, 0.10); --list-bullet-bg: #16a34a; --list-counter-bg: #e67e22; --list-counter-fg: #ffffff; --list-counter-shadow: 0 2px 6px rgba(230, 126, 34, 0.30); /* ---------- Pros & Cons ---------- */ --pc-col-bg: #fff8f1; --pc-col-border: rgba(154, 52, 18, 0.12); --pc-col-shadow: 0 2px 10px rgba(154, 52, 18, 0.10); --pc-pros: #16a34a; --pc-cons: #dc2626; --pc-icon-fg: #ffffff; } /* ============================================================ Azure — bright sky blue on white. Crisp, 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: #075985; --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) ---------- Button background is a darker step than --color-primary so white label text keeps a >=4.5:1 contrast ratio. */ --btn-primary-bg: #075985; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #0c4a6e; --btn-secondary-bg: #0c4a6e; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #082f49; --btn-shadow: 0 4px 15px rgba(7, 89, 133, 0.25); --btn-shadow-hover: 0 6px 20px rgba(7, 89, 133, 0.35); /* Premium gold CTA — identical across palettes so it always pops. */ --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: #d6ecfb; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #0ea5e9; --exclusive-badge-bg: #075985; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #d1d5db; --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 (review cards, lists, pros/cons) ============================================================ */ --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 grid — every card token stated explicitly. ============================================================ */ --rc-bg: #ffffff; --rc-bg-elev: #f0f9ff; --rc-border: rgba(7, 89, 133, 0.12); --rc-divider: rgba(7, 89, 133, 0.10); --rc-fg: #0c1a2b; --rc-fg-muted: rgba(12, 26, 43, 0.60); /* Bonus figure stays green in every palette — money reads as green. */ --rc-accent: #16a34a; --rc-accent-soft: rgba(22, 163, 74, 0.14); --rc-accent-strong: #15803d; --rc-star-on: #f1c40f; --rc-star-off: rgba(7, 89, 133, 0.20); --rc-pos-border: rgba(7, 89, 133, 0.30); --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 tint of the brand hue */ --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 brand hue, white label */ --rc-play-btn-bg: #075985; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #0c4a6e; --rc-shadow: 0 4px 16px rgba(7, 89, 133, 0.10); --rc-shadow-hover: 0 6px 22px rgba(7, 89, 133, 0.18); /* ---------- Lists ---------- */ --list-card-bg: #f0f9ff; --list-card-border: rgba(7, 89, 133, 0.12); --list-card-border-hover: rgba(7, 89, 133, 0.22); --list-card-shadow: 0 2px 8px rgba(7, 89, 133, 0.10); --list-bullet-bg: #16a34a; --list-counter-bg: #0ea5e9; --list-counter-fg: #ffffff; --list-counter-shadow: 0 2px 6px rgba(14, 165, 233, 0.30); /* ---------- Pros & Cons ---------- */ --pc-col-bg: #f0f9ff; --pc-col-border: rgba(7, 89, 133, 0.12); --pc-col-shadow: 0 2px 10px rgba(7, 89, 133, 0.10); --pc-pros: #16a34a; --pc-cons: #dc2626; --pc-icon-fg: #ffffff; } /* ============================================================ Teal — calm blue-green on white. Trustworthy, modern. ============================================================ */ [data-theme="teal"] { /* ---------- Base text / background ---------- */ --color-fg: #06201d; --color-fg-muted: #3f7d75; --color-fg-subtle: #115e59; --color-bg: #ffffff; --color-bg-elev: #f0fdfa; --color-border: #ccfbf1; --color-border-soft: #e6fffb; /* ---------- Brand / accents ---------- */ --color-primary: #0d9488; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(13, 148, 136, 0.30); /* ---------- Headings ---------- */ --color-h1: #115e59; --color-h2: #0d9488; --color-h3: #0f766e; --color-h4: #115e59; --color-h5: #134e4a; --color-h6: #042f2e; --color-success: #0d9488; --color-success-strong: #115e59; --color-neutral-ink: #134e4a; --color-neutral-ink-weak: #ccfbf1; /* ---------- Header / Nav ---------- */ --topbar-bg: #ffffff; --topbar-ink: #115e59; --subnav-bg: #115e59; --subnav-link: #ccfbf1; --subnav-link-hover: #ffffff; --topnav-bg: #f0fdfa; /* ---------- Buttons (legacy primary) ---------- Button background is a darker step than --color-primary so white label text keeps a >=4.5:1 contrast ratio. */ --btn-primary-bg: #0f766e; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #115e59; --btn-secondary-bg: #134e4a; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #042f2e; --btn-shadow: 0 4px 15px rgba(15, 118, 110, 0.25); --btn-shadow-hover: 0 6px 20px rgba(15, 118, 110, 0.35); /* Premium gold CTA — identical across palettes so it always pops. */ --btn-premium-fg: #06201d; --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: #ccfbf1; --table-head-bg: #f0fdfa; --table-head-accent: #0d9488; --table-row-hover: #e6fffb; --table-col-separator: #0d9488; /* ---------- Generic cards (legacy grid layout) ---------- */ --card-bg: #ffffff; --card-border: #ccfbf1; --card-shadow: 0 4px 20px rgba(13, 148, 136, 0.08); --card-shadow-hover: 0 8px 30px rgba(13, 148, 136, 0.14); --rating-star-empty: #ccfbf1; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #0d9488; --exclusive-badge-bg: #0f766e; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #d1d5db; --badge-top3: #cd7f32; /* ---------- Misc ---------- */ --shadow-soft: 0 2px 10px rgba(6, 32, 29, 0.06); --shadow-strong: 0 4px 20px rgba(6, 32, 29, 0.10); --focus-outline: 2px solid #0d9488; /* ============================================================ Semantic palette (review cards, lists, pros/cons) ============================================================ */ --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: #06201d; --c-neutral-text-muted: rgba(6, 32, 29, 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); /* ============================================================ Review grid — every card token stated explicitly. ============================================================ */ --rc-bg: #ffffff; --rc-bg-elev: #f0fdfa; --rc-border: rgba(17, 94, 89, 0.12); --rc-divider: rgba(17, 94, 89, 0.10); --rc-fg: #06201d; --rc-fg-muted: rgba(6, 32, 29, 0.60); /* Bonus figure stays green in every palette — money reads as green. */ --rc-accent: #16a34a; --rc-accent-soft: rgba(22, 163, 74, 0.14); --rc-accent-strong: #15803d; --rc-star-on: #f1c40f; --rc-star-off: rgba(17, 94, 89, 0.20); --rc-pos-border: rgba(17, 94, 89, 0.30); --rc-excl-bg: rgba(13, 148, 136, 0.12); --rc-excl-fg: #0d9488; --rc-excl-border: rgba(13, 148, 136, 0.40); /* "Read review" — pastel tint of the brand hue */ --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; /* "Play now" — saturated brand hue, white label */ --rc-play-btn-bg: #0f766e; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #115e59; --rc-shadow: 0 4px 16px rgba(17, 94, 89, 0.10); --rc-shadow-hover: 0 6px 22px rgba(17, 94, 89, 0.18); /* ---------- Lists ---------- */ --list-card-bg: #f0fdfa; --list-card-border: rgba(17, 94, 89, 0.12); --list-card-border-hover: rgba(17, 94, 89, 0.22); --list-card-shadow: 0 2px 8px rgba(17, 94, 89, 0.10); --list-bullet-bg: #16a34a; --list-counter-bg: #0d9488; --list-counter-fg: #ffffff; --list-counter-shadow: 0 2px 6px rgba(13, 148, 136, 0.30); /* ---------- Pros & Cons ---------- */ --pc-col-bg: #f0fdfa; --pc-col-border: rgba(17, 94, 89, 0.12); --pc-col-shadow: 0 2px 10px rgba(17, 94, 89, 0.10); --pc-pros: #16a34a; --pc-cons: #dc2626; --pc-icon-fg: #ffffff; } /* ============================================================ Violet — deep purple on white. Premium, distinctive. ============================================================ */ [data-theme="violet"] { /* ---------- Base text / background ---------- */ --color-fg: #1b1035; --color-fg-muted: #6d5a9c; --color-fg-subtle: #4c1d95; --color-bg: #ffffff; --color-bg-elev: #faf5ff; --color-border: #e9d5ff; --color-border-soft: #f3e8ff; /* ---------- Brand / accents ---------- */ --color-primary: #7c3aed; --color-primary-ink: #ffffff; --color-primary-shadow: rgba(124, 58, 237, 0.30); /* ---------- Headings ---------- */ --color-h1: #5b21b6; --color-h2: #7c3aed; --color-h3: #6d28d9; --color-h4: #5b21b6; --color-h5: #4c1d95; --color-h6: #2e1065; --color-success: #7c3aed; --color-success-strong: #5b21b6; --color-neutral-ink: #4c1d95; --color-neutral-ink-weak: #e9d5ff; /* ---------- Header / Nav ---------- */ --topbar-bg: #ffffff; --topbar-ink: #5b21b6; --subnav-bg: #5b21b6; --subnav-link: #ede9fe; --subnav-link-hover: #ffffff; --topnav-bg: #faf5ff; /* ---------- Buttons (legacy primary) ---------- Button background is a darker step than --color-primary so white label text keeps a >=4.5:1 contrast ratio. */ --btn-primary-bg: #6d28d9; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #5b21b6; --btn-secondary-bg: #4c1d95; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #2e1065; --btn-shadow: 0 4px 15px rgba(109, 40, 217, 0.25); --btn-shadow-hover: 0 6px 20px rgba(109, 40, 217, 0.35); /* Premium gold CTA — identical across palettes so it always pops. */ --btn-premium-fg: #1b1035; --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: #e9d5ff; --table-head-bg: #faf5ff; --table-head-accent: #7c3aed; --table-row-hover: #f3e8ff; --table-col-separator: #7c3aed; /* ---------- Generic cards (legacy grid layout) ---------- */ --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.14); --rating-star-empty: #e9d5ff; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #7c3aed; --exclusive-badge-bg: #6d28d9; --exclusive-badge-fg: #ffffff; --badge-top1: #f1c40f; --badge-top2: #d1d5db; --badge-top3: #cd7f32; /* ---------- Misc ---------- */ --shadow-soft: 0 2px 10px rgba(27, 16, 53, 0.06); --shadow-strong: 0 4px 20px rgba(27, 16, 53, 0.10); --focus-outline: 2px solid #7c3aed; /* ============================================================ Semantic palette (review cards, lists, pros/cons) ============================================================ */ --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: #f3e8ff; --c-info-soft-2: #e9d5ff; --c-info-strong: #5b21b6; --c-info-light: #c4b5fd; --c-warning: #f59e0b; --c-neutral-text: #1b1035; --c-neutral-text-muted: rgba(27, 16, 53, 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); /* ============================================================ Review grid — every card token stated explicitly. ============================================================ */ --rc-bg: #ffffff; --rc-bg-elev: #faf5ff; --rc-border: rgba(91, 33, 182, 0.12); --rc-divider: rgba(91, 33, 182, 0.10); --rc-fg: #1b1035; --rc-fg-muted: rgba(27, 16, 53, 0.60); /* Bonus figure stays green in every palette — money reads as green. */ --rc-accent: #16a34a; --rc-accent-soft: rgba(22, 163, 74, 0.14); --rc-accent-strong: #15803d; --rc-star-on: #f1c40f; --rc-star-off: rgba(91, 33, 182, 0.20); --rc-pos-border: rgba(91, 33, 182, 0.30); --rc-excl-bg: rgba(124, 58, 237, 0.12); --rc-excl-fg: #7c3aed; --rc-excl-border: rgba(124, 58, 237, 0.40); /* "Read review" — pastel tint of the brand hue */ --rc-review-btn-bg: #f3e8ff; --rc-review-btn-border: #e9d5ff; --rc-review-btn-fg: #5b21b6; --rc-review-btn-bg-hover: #e9d5ff; --rc-review-btn-border-hover: #c4b5fd; /* "Play now" — saturated brand hue, white label */ --rc-play-btn-bg: #6d28d9; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #5b21b6; --rc-shadow: 0 4px 16px rgba(91, 33, 182, 0.10); --rc-shadow-hover: 0 6px 22px rgba(91, 33, 182, 0.18); /* ---------- Lists ---------- */ --list-card-bg: #faf5ff; --list-card-border: rgba(91, 33, 182, 0.12); --list-card-border-hover: rgba(91, 33, 182, 0.22); --list-card-shadow: 0 2px 8px rgba(91, 33, 182, 0.10); --list-bullet-bg: #16a34a; --list-counter-bg: #7c3aed; --list-counter-fg: #ffffff; --list-counter-shadow: 0 2px 6px rgba(124, 58, 237, 0.30); /* ---------- Pros & Cons ---------- */ --pc-col-bg: #faf5ff; --pc-col-border: rgba(91, 33, 182, 0.12); --pc-col-shadow: 0 2px 10px rgba(91, 33, 182, 0.10); --pc-pros: #16a34a; --pc-cons: #dc2626; --pc-icon-fg: #ffffff; } /* ============================================================ Crimson — deep red on white. Sophisticated, high-contrast. ============================================================ */ [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) ---------- Button background is a darker step than --color-primary so white label text keeps a >=4.5:1 contrast ratio. */ --btn-primary-bg: #b91c1c; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #7f1d1d; --btn-secondary-bg: #5c1414; --btn-secondary-fg: #ffffff; --btn-secondary-bg-hover: #4a1010; --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 CTA — identical across palettes so it always pops. */ --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: #fdeaea; --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.14); --rating-star-empty: #fadcdc; --rating-star-filled: #f1c40f; --exclusive-border: 2px solid #b91c1c; --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 (review cards, lists, pros/cons) ============================================================ */ --c-success: #16a34a; --c-success-strong: #15803d; --c-success-soft: rgba(22, 163, 74, 0.14); --c-danger: #dc2626; --c-info: #b91c1c; --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 grid — every card token stated explicitly. ============================================================ */ --rc-bg: #ffffff; --rc-bg-elev: #fff7f7; --rc-border: rgba(127, 29, 29, 0.12); --rc-divider: rgba(127, 29, 29, 0.10); --rc-fg: #1c0d0d; --rc-fg-muted: rgba(28, 13, 13, 0.60); /* Bonus figure stays green in every palette — money reads as green. */ --rc-accent: #16a34a; --rc-accent-soft: rgba(22, 163, 74, 0.14); --rc-accent-strong: #15803d; --rc-star-on: #f1c40f; --rc-star-off: rgba(127, 29, 29, 0.20); --rc-pos-border: rgba(127, 29, 29, 0.30); --rc-excl-bg: rgba(185, 28, 28, 0.12); --rc-excl-fg: #b91c1c; --rc-excl-border: rgba(185, 28, 28, 0.40); /* "Read review" — pastel tint of the brand hue */ --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" — saturated brand hue, white label */ --rc-play-btn-bg: #b91c1c; --rc-play-btn-fg: #ffffff; --rc-play-btn-bg-hover: #7f1d1d; --rc-shadow: 0 4px 16px rgba(127, 29, 29, 0.10); --rc-shadow-hover: 0 6px 22px rgba(127, 29, 29, 0.18); /* ---------- Lists ---------- */ --list-card-bg: #fff7f7; --list-card-border: rgba(127, 29, 29, 0.12); --list-card-border-hover: rgba(127, 29, 29, 0.22); --list-card-shadow: 0 2px 8px rgba(127, 29, 29, 0.10); --list-bullet-bg: #16a34a; --list-counter-bg: #b91c1c; --list-counter-fg: #ffffff; --list-counter-shadow: 0 2px 6px rgba(185, 28, 28, 0.30); /* ---------- Pros & Cons ---------- */ --pc-col-bg: #fff7f7; --pc-col-border: rgba(127, 29, 29, 0.12); --pc-col-shadow: 0 2px 10px rgba(127, 29, 29, 0.10); --pc-pros: #16a34a; --pc-cons: #dc2626; --pc-icon-fg: #ffffff; }