/**
 * Brand color tokens for ATOP Variation Swatches.
 */

:root {
  /* Shared neutrals */
  --atop-vs-border: #e5e5e5;
  --atop-vs-text-muted: #888888;
  --atop-vs-badge-text: #fff;
  --atop-vs-sticky-bg: rgba(255, 255, 255, 0.8);
  --atop-vs-sticky-bg-mobile: rgba(255, 255, 255, 0.92);
  --atop-vs-sticky-shadow: rgba(0, 0, 0, 0.1);
  --atop-vs-sticky-btn-text: #fff;
  --atop-vgs-border-default: #e5e5e5;
  --atop-vgs-bg-default: #ffffff;
}

body.atp-site-drd {
  --atop-vs-border-selected: #d2b885;
  --atop-vs-glow: #efe5d0;
  --atop-vs-bg-hover: rgba(239, 229, 208, 0.15);
  --atop-vs-bg-selected: rgba(239, 229, 208, 0.25);
  --atop-vs-badge-bg: #709900;
  --atop-vs-sticky-btn-bg: #709900;
  --atop-vgs-brand: #d2b885;
  --atop-vgs-brand-soft: #efe5d0;
  --atop-vgs-shadow-soft: rgba(210, 184, 133, 0.12);
  --atop-vgs-shadow-strong: rgba(210, 184, 133, 0.18);
}

body.atp-site-wowtea {
  --atop-vs-border-selected: #2dbd0b;
  --atop-vs-glow: #2dbd0b;
  --atop-vs-bg-hover: rgba(255, 242, 248, 0.5);
  --atop-vs-bg-selected: #fff2f8;
  --atop-vs-badge-bg: #2dbd0b;
  --atop-vs-sticky-btn-bg: #2dbd0b;
  --atop-vgs-brand: #e88aa8;
  --atop-vgs-brand-soft: #fff2f8;
  --atop-vgs-shadow-soft: rgba(214, 0, 87, 0.12);
  --atop-vgs-shadow-strong: rgba(214, 0, 87, 0.18);
}

body.atp-site-onyco {
  --atop-vs-border-selected: #0a84ff;
  --atop-vs-glow: #0a84ff;
  --atop-vs-bg-hover: rgba(10, 132, 255, 0.03);
  --atop-vs-bg-selected: rgba(10, 132, 255, 0.05);
  --atop-vs-badge-bg: #0a84ff;
  --atop-vs-sticky-btn-bg: #0a84ff;
  --atop-vs-sticky-bg-mobile: rgba(255, 255, 255, 0.7);
  --atop-vgs-brand: #0a84ff;
  --atop-vgs-brand-soft: rgba(10, 132, 255, 0.05);
  --atop-vgs-shadow-soft: rgba(10, 132, 255, 0.12);
  --atop-vgs-shadow-strong: rgba(10, 132, 255, 0.18);
}