/* VeraScripts light storefront (2026-09-28). Loaded after tokens-v2.css only when the
   light theme is on (templates_light/v2/base.html). Flips the shared design tokens to
   light and restyles shared components. Header/footer/promo: light-chrome.css. */

/* ---------- Tokens ---------- */
/* html:root outranks the :root token blocks that some live page stylesheets
   (content-v2.css and friends) load after this file. */
html:root {
  --ink-1: #0b1d2b;
  --ink-2: #3b5263;
  --ink-3: #4f6372;
  --ink-4: #5a6d7c;
  --page-bg: #f4f7fa;
  --surface: #ffffff;
  --surface-2: #f7fafc;
  --surface-3: #eef3f7;
  --border: rgba(11, 29, 43, 0.1);
  --border-strong: rgba(11, 29, 43, 0.18);
  --divider: rgba(11, 29, 43, 0.08);
  --vera: #7dd3ff;
  --vera-hover: #9bdfff;
  --vera-ink: #08131c;
  --vera-tint: rgba(11, 111, 208, 0.08);
  --vera-tint-bd: rgba(11, 111, 208, 0.24);
  --brand-link: #0b6fd0;
  --brand-tint: rgba(11, 111, 208, 0.08);
  --brand-tint-bd: rgba(11, 111, 208, 0.24);
  --brand-on-tint: #0b5784;
  --green-light: #15803d;
  --green-light-ink: #15803d;
  --live: #16a34a;
  --acc-demon-wash: color-mix(in oklab, #f0484e 9%, #ffffff);
  --acc-reaper-wash: color-mix(in oklab, #d1293d 9%, #ffffff);
  --acc-vortex-wash: color-mix(in oklab, #20b8e8 9%, #ffffff);
  --acc-fadeaway-wash: color-mix(in oklab, #8b67ff 9%, #ffffff);
  --acc-plus-wash: color-mix(in oklab, #efbf3a 12%, #ffffff);
  --acc-breach-wash: color-mix(in oklab, #f07d34 9%, #ffffff);
  --acc-r6-breach-wash: color-mix(in oklab, #f07d34 9%, #ffffff);
  --acc-r6-bastion-wash: color-mix(in oklab, #2bc0cc 9%, #ffffff);
  --acc-rust-outpost-wash: color-mix(in oklab, #3ecf7a 9%, #ffffff);
  --acc-apex-ascend-wash: color-mix(in oklab, #f0559a 9%, #ffffff);
  --acc-rewind-wash: color-mix(in oklab, #8ba3c7 11%, #ffffff);
  --shadow-xs: 0 1px 2px rgba(8, 19, 28, 0.06);
  --shadow-card: 0 1px 2px rgba(8, 19, 28, 0.05), 0 12px 28px -16px rgba(8, 19, 28, 0.2);
  --shadow-card-hover: 0 1px 2px rgba(8, 19, 28, 0.05), 0 22px 44px -20px rgba(8, 19, 28, 0.3);
  --shadow-float: 0 26px 60px -26px rgba(8, 19, 28, 0.32);
  --brand-fill: #0b6fd0;
  --badge-gray-bg: #eef3f7;
  --badge-gray-bd: rgba(11, 29, 43, 0.1);
  --badge-gray-tx: #3b5263;
  --mesh: radial-gradient(600px 300px at 20% -10%, rgba(11, 111, 208, 0.06), transparent 60%);
  --price-blue: #0b94e6;
  --price-red: #dc2626;
  --lt-blue: #0b6fd0;
  --lt-blue-hover: #095fb3;
  --lt-indigo: #6458f4;
}
html:root {
  color-scheme: light;
}
html,
body {
  background: var(--page-bg);
  color: var(--ink-1);
}
::selection {
  background: #cfe8fb;
  color: #0b1d2b;
}
a {
  color: inherit;
}

/* ---------- Buttons (shared) ---------- */
.btn-primary,
.btn-accent,
.btn-coral,
.btn-buy {
  background: var(--vera);
  color: var(--vera-ink) !important;
  border-color: transparent;
}
.btn-primary:hover,
.btn-accent:hover,
.btn-coral:hover,
.btn-buy:hover {
  background: var(--vera-hover);
}
.btn-ghost {
  background: #fff;
  color: #0b1d2b !important;
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
  background: #f3faff;
  border-color: #9ccbe8;
}

/* ---------- Shared surfaces used across pages ---------- */
.pcard,
.bcard,
.stat-card,
.receipt,
.spec-strip {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
.chip,
.tchip,
.badge {
  background: var(--surface-3);
  color: var(--ink-2);
  border-color: var(--border);
}
.purchase-disclaimer {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--ink-3) !important;
}
.skip-link {
  background: #0b1d2b;
  color: #fff;
}

/* ---------- Shared light-storefront pieces (home, product, checkout, dashboard) ---------- */
.lt-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lt-eyebrow {
  display: inline-block;
  color: #0b6fd0;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
}
.lt-h2 {
  margin: 12px 0 14px;
  color: #0b1d2b;
  font: 650 clamp(32px, 3.6vw, 48px)/1.05 var(--font-body);
  letter-spacing: -0.045em;
}
.lt-h2 em,
.lt-h-display em {
  font-style: normal;
  color: #0a7fc0;
}
.lt-center {
  text-align: center;
}
.lt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 600 15px/1 var(--font-body);
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.lt-btn-blue {
  background: #0b6fd0;
  border-color: #0b6fd0;
  color: #fff !important;
  box-shadow: 0 10px 22px -12px #0b6fd0;
}
.lt-btn-blue:hover {
  background: #095fb3;
  border-color: #095fb3;
}
.lt-btn-line {
  background: #fff;
  border-color: #d5dee6;
  color: #0b1d2b !important;
  font-weight: 500;
}
.lt-btn-line:hover {
  background: #f5f8fa;
  border-color: #b9c7d3;
}
.lt-btn-sky {
  background: #7dd3ff;
  color: #08131c !important;
  box-shadow: 0 12px 26px -14px #1487c2;
}
.lt-btn-sky:hover {
  background: #9bdfff;
}
.lt-btn-discord {
  background: #5865f2;
  color: #fff !important;
  box-shadow: 0 16px 32px -16px #5865f2;
}
.lt-btn-discord:hover {
  background: #4752e0;
}
.lt-discord {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.lt-discord svg {
  width: 20px;
  height: 15px;
}
.lt-ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-chip {
  position: absolute;
  top: -7px;
  left: 50%;
  z-index: 8;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: #6458f4;
  color: #fff;
  font: 650 14px/1 var(--font-body);
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px #6458f4b3, 0 2px 6px #0b1d2b26;
  pointer-events: none;
}
.verified-seal {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.28em;
  vertical-align: -0.06em;
  filter: drop-shadow(0 3px 6px #6458f459);
}
@media (max-width: 760px) {
  .media-chip {
    padding: 7px 13px;
    font-size: 12.5px;
  }
}

.lt-nowrap {
  white-space: nowrap;
}

/* ---------- Text that the dark theme coloured sky blue: Vera blue on white ---------- */
html body :is(.hl, .hl-brand, .idx, .kick .idx, .poster .hl, .poster-sm .hl, .poster .hl-brand,
  .poster-sm .hl-brand, .ab .hl, .af-simple .hl, .af-product b, .af-rate-pill b, .af-step-icon,
  .cl h1 .hl, .em-eyebrow, .fl-prog .t em, .blog-feature-flag,
  .foot-brand .b span, .tb-arrow) {
  color: var(--lt-blue);
}
html body .af-faq-list summary::after {
  color: var(--lt-blue);
}
html body :is(h1, h2, h3) em {
  color: var(--lt-blue);
}
html body .rv-stars {
  color: #f2a900;
}