/* Panda Pal landing — A/B/C color tokens (variants A · B · E) */

:root,
html[data-variant="a"] {
  --bg-primary: #12121a;
  --bg-secondary: #1a1a28;
  --bg-card: rgba(255, 255, 255, 0.06);
  --brand-primary: #7359d9;
  --brand-dark: #4026a6;
  --brand-accent: #00cce6;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.45);
  --nav-bg: rgba(18, 18, 26, 0.88);
  --header-border: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.06);
  --section-border: rgba(255, 255, 255, 0.08);
  --hero-blob: rgba(115, 89, 217, 0.18);
  --hero-blob-2: rgba(0, 204, 230, 0.1);
  --badge-border: rgba(0, 204, 230, 0.3);
  --btn-shadow: rgba(115, 89, 217, 0.35);
  --btn-shadow-hover: rgba(115, 89, 217, 0.45);
  --menu-active-bg: rgba(115, 89, 217, 0.2);
  --secondary-border: rgba(255, 255, 255, 0.12);
  --secondary-hover-bg: rgba(255, 255, 255, 0.1);
  --secondary-hover-border: rgba(255, 255, 255, 0.2);
  --feature-hover-border: rgba(115, 89, 217, 0.25);
  --testi-hover-border: rgba(0, 204, 230, 0.2);
  --phone-g1: #260b73;
  --phone-g2: #4026a6;
  --phone-g3: #12121a;
  --phone-border: rgba(255, 255, 255, 0.1);
  --phone-glow: rgba(115, 89, 217, 0.15);
  --preview-overlay-top: rgba(18, 18, 26, 0.1);
  --preview-overlay-bottom: rgba(18, 18, 26, 0.55);
  --preview-reading-g1: rgba(0, 204, 230, 0.35);
  --preview-reading-g2: #12121a;
  --icon-1: rgba(0, 204, 230, 0.2);
  --icon-2: rgba(115, 89, 217, 0.2);
  --icon-3: rgba(255, 153, 51, 0.2);
  --icon-4: rgba(51, 204, 102, 0.2);
  --icon-5: rgba(115, 89, 217, 0.2);
  --icon-6: rgba(0, 204, 230, 0.2);
  --cta-blob: rgba(0, 204, 230, 0.08);
  --cta-btn-bg: #ffffff;
  --cta-btn-text: #12121a;
  --placeholder-grad-start: rgba(115, 89, 217, 0.25);
  --placeholder-grad-end: rgba(18, 18, 26, 0.9);
  --ph-glyph-color: rgba(255, 255, 255, 0.15);
  --tag-border: rgba(115, 89, 217, 0.3);
  --qr-fill: #12121a;
  --qr-bg: rgba(255, 255, 255, 0.95);
  --stat-hover-border: rgba(0, 204, 230, 0.2);
  color-scheme: dark;
}

html[data-variant="b"] {
  --bg-primary: #131f24;
  --bg-secondary: #1f2f35;
  --bg-card: rgba(255, 255, 255, 0.05);
  --brand-primary: #1cb0f6;
  --brand-dark: #1899d6;
  --brand-accent: #57cc02;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.45);
  --nav-bg: rgba(19, 31, 36, 0.9);
  --header-border: rgba(255, 255, 255, 0.06);
  --card-border: rgba(28, 176, 246, 0.12);
  --section-border: rgba(255, 255, 255, 0.08);
  --hero-blob: rgba(28, 176, 246, 0.16);
  --hero-blob-2: rgba(87, 204, 2, 0.1);
  --badge-border: rgba(87, 204, 2, 0.35);
  --btn-shadow: rgba(28, 176, 246, 0.35);
  --btn-shadow-hover: rgba(28, 176, 246, 0.45);
  --menu-active-bg: rgba(28, 176, 246, 0.18);
  --secondary-border: rgba(255, 255, 255, 0.12);
  --secondary-hover-bg: rgba(255, 255, 255, 0.08);
  --secondary-hover-border: rgba(28, 176, 246, 0.25);
  --feature-hover-border: rgba(28, 176, 246, 0.28);
  --testi-hover-border: rgba(87, 204, 2, 0.22);
  --phone-g1: #0d4a6e;
  --phone-g2: #1899d6;
  --phone-g3: #131f24;
  --phone-border: rgba(28, 176, 246, 0.2);
  --phone-glow: rgba(28, 176, 246, 0.18);
  --preview-overlay-top: rgba(19, 31, 36, 0.08);
  --preview-overlay-bottom: rgba(19, 31, 36, 0.55);
  --preview-reading-g1: rgba(87, 204, 2, 0.35);
  --preview-reading-g2: #131f24;
  --icon-1: rgba(28, 176, 246, 0.22);
  --icon-2: rgba(87, 204, 2, 0.22);
  --icon-3: rgba(254, 150, 0, 0.22);
  --icon-4: rgba(205, 130, 255, 0.2);
  --icon-5: rgba(87, 204, 2, 0.18);
  --icon-6: rgba(28, 176, 246, 0.18);
  --cta-blob: rgba(87, 204, 2, 0.1);
  --cta-btn-bg: #57cc02;
  --cta-btn-text: #131f24;
  --placeholder-grad-start: rgba(28, 176, 246, 0.22);
  --placeholder-grad-end: rgba(19, 31, 36, 0.92);
  --ph-glyph-color: rgba(255, 255, 255, 0.14);
  --tag-border: rgba(28, 176, 246, 0.28);
  --qr-fill: #131f24;
  --qr-bg: rgba(255, 255, 255, 0.95);
  --stat-hover-border: rgba(87, 204, 2, 0.22);
  color-scheme: dark;
}

html[data-variant="e"] {
  --bg-primary: #f7f9fc;
  --bg-secondary: #edf2f7;
  --bg-card: rgba(19, 31, 36, 0.04);
  --brand-primary: #1cb0f6;
  --brand-dark: #1899d6;
  --brand-accent: #57cc02;
  --text-primary: #131f24;
  --text-secondary: rgba(19, 31, 36, 0.72);
  --text-muted: rgba(19, 31, 36, 0.48);
  --nav-bg: rgba(247, 249, 252, 0.92);
  --header-border: rgba(19, 31, 36, 0.08);
  --card-border: rgba(19, 31, 36, 0.08);
  --section-border: rgba(19, 31, 36, 0.1);
  --hero-blob: rgba(28, 176, 246, 0.12);
  --hero-blob-2: rgba(87, 204, 2, 0.08);
  --badge-border: rgba(28, 176, 246, 0.25);
  --btn-shadow: rgba(28, 176, 246, 0.25);
  --btn-shadow-hover: rgba(28, 176, 246, 0.35);
  --menu-active-bg: rgba(28, 176, 246, 0.12);
  --secondary-border: rgba(19, 31, 36, 0.12);
  --secondary-hover-bg: rgba(19, 31, 36, 0.06);
  --secondary-hover-border: rgba(19, 31, 36, 0.18);
  --feature-hover-border: rgba(28, 176, 246, 0.22);
  --testi-hover-border: rgba(87, 204, 2, 0.2);
  --phone-g1: #b8e4f8;
  --phone-g2: #1cb0f6;
  --phone-g3: #f7f9fc;
  --phone-border: rgba(19, 31, 36, 0.1);
  --phone-glow: rgba(28, 176, 246, 0.12);
  --preview-overlay-top: rgba(247, 249, 252, 0.05);
  --preview-overlay-bottom: rgba(19, 31, 36, 0.35);
  --preview-reading-g1: rgba(87, 204, 2, 0.28);
  --preview-reading-g2: #edf2f7;
  --icon-1: rgba(28, 176, 246, 0.15);
  --icon-2: rgba(87, 204, 2, 0.15);
  --icon-3: rgba(254, 150, 0, 0.15);
  --icon-4: rgba(205, 130, 255, 0.12);
  --icon-5: rgba(28, 176, 246, 0.12);
  --icon-6: rgba(87, 204, 2, 0.12);
  --cta-blob: rgba(28, 176, 246, 0.08);
  --cta-btn-bg: #1cb0f6;
  --cta-btn-text: #ffffff;
  --placeholder-grad-start: rgba(28, 176, 246, 0.15);
  --placeholder-grad-end: rgba(237, 242, 247, 0.95);
  --ph-glyph-color: rgba(19, 31, 36, 0.12);
  --tag-border: rgba(28, 176, 246, 0.22);
  --qr-fill: #131f24;
  --qr-bg: rgba(255, 255, 255, 0.98);
  --stat-hover-border: rgba(28, 176, 246, 0.2);
  color-scheme: light;
}

.feature-icon.icon-1 { background: var(--icon-1); }
.feature-icon.icon-2 { background: var(--icon-2); }
.feature-icon.icon-3 { background: var(--icon-3); }
.feature-icon.icon-4 { background: var(--icon-4); }
.feature-icon.icon-5 { background: var(--icon-5); }
.feature-icon.icon-6 { background: var(--icon-6); }

.preview-phone.preview-reading {
  background: linear-gradient(160deg, var(--preview-reading-g1), var(--preview-reading-g2));
}