/* Light mode: the base palette. Everything else (Elementor colors, inline colors) is remapped by light-mode.js. */
html.rrr-light {
  --rrr-base: #F4F5F7;
  --rrr-surface: #FFFFFF;
  --rrr-panel: #FFFFFF;
  --rrr-field: #FFFFFF;
  --rrr-line: #DDE0E6;
  --rrr-hairline: #E8EAEE;
  --rrr-text: #14151A;
  --rrr-muted: #555867;
  --rrr-faint: #7A7D8A;
  --rrr-accent: #2B2BD8;
  --rrr-accent-bright: #2B2BD8;
}
/* Photo-backed sections keep the dark palette so their text stays readable. */
html.rrr-light .rrr-keep-dark {
  --rrr-base: #08080A; --rrr-surface: #0B0B0D; --rrr-panel: #0F0F14; --rrr-field: #15151A;
  --rrr-line: #22222A; --rrr-hairline: #1B1B22; --rrr-text: #E8E9ED; --rrr-muted: #8A8C99;
  --rrr-faint: #5E606C; --rrr-accent-bright: #6E6EFF;
}
html.rrr-light body { background: var(--rrr-base); color: var(--rrr-text); }
html.rrr-light .woocommerce ul.products li.product:hover { border-color: #B9BDC8; }

/* The switch */
.rrr-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; margin: 0 0 0 14px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid #44444F; color: #E8E9ED; border-radius: 0;
  transition: border-color .2s, color .2s;
}
.rrr-theme-toggle:hover, .rrr-theme-toggle:focus-visible { border-color: #6E6EFF; color: #6E6EFF; outline: none; }
.rrr-theme-toggle svg { width: 20px; height: 20px; display: block; }
.rrr-theme-toggle .rrr-ico-moon { display: none; }
html.rrr-light .rrr-theme-toggle { border-color: #C5C9D3; color: #14151A; }
html.rrr-light .rrr-theme-toggle:hover { border-color: #2B2BD8; color: #2B2BD8; }
html.rrr-light .rrr-theme-toggle .rrr-ico-sun { display: none; }
html.rrr-light .rrr-theme-toggle .rrr-ico-moon { display: block; }
@media (max-width: 767px) { .rrr-theme-toggle { width: 34px; height: 34px; margin-left: 8px; } }

/* WooPayments "pay over time" message is drawn by Stripe in the dark theme's colors; give it a dark chip so it stays readable. */
html.rrr-light #payment-method-message { background: #14151A; padding: 6px 12px 2px; margin-bottom: 12px; }