/* ── Theme toggle button ── */
.r2-theme-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.04); color: var(--fg-3); cursor: pointer; transition: all .18s; flex-shrink: 0; }
.r2-theme-btn:hover { background: rgba(212,175,95,.1); border-color: rgba(212,175,95,.3); color: var(--gold); }

/* ── Custom scrollbar (Chrome/Edge/Safari) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
::-webkit-scrollbar-thumb { background: rgba(212,175,95,.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,95,.6); }
/* Firefox */
html, body, * { scrollbar-width: thin; scrollbar-color: rgba(212,175,95,.4) transparent; }

/* ════════════════════════════════════════════════════════
   LIGHT THEME
   Specificity must beat `.r2-root.v-premium` (0,2,0) in inline
   styles → we use `.r2-root.v-premium[data-theme="light"]`
   (0,3,0) for every variable override. Plain page selectors
   (no .v-premium) use `.r2-root[data-theme="light"]` (0,2,0).
   ════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  background: #f5f0e8;
  color: #1c1208;
  /* CSS-переменные для страниц гайдов (нет .r2-root, переменные живут в :root) */
  --bg-dark:   #f5f0e8;
  --bg-dark-2: #ede7da;
  --fg:        #1c1208;
  --fg-2:      #3d2e18;
  --fg-3:      #7a6a50;
  --line-soft: rgba(100,70,20,.10);
  --line:      rgba(100,70,20,.22);
  --gold-soft: #8b5a18;
}
html[data-theme="light"] body { background: #f5f0e8; color: #1c1208; }

.r2-root[data-theme="light"],
.r2-root.v-premium[data-theme="light"] {
  --bg-hero:    #f5f0e8;
  --bg-dark:    #f5f0e8;
  --bg-dark-2:  #ede7da;
  --fg:         #1c1208;
  --fg-2:       #3d2e18;
  --fg-3:       #7a6a50;
  --white:      #ffffff;
  --black:      #1c1208;
  --line-soft:  rgba(100,70,20,.10);
  --line:       rgba(100,70,20,.22);
  --gold-soft:  #8b5a18;           /* darker so text reads on light bg */
  --tw-accent-soft: #8b5a18;       /* same for tw alias                 */
  --surface:    rgba(0,0,0,.04);   /* card-on-page tint                  */
  --surface-2:  rgba(0,0,0,.07);
}
/* Dark-theme parity for --surface so components can use it everywhere */
.r2-root { --surface: rgba(255,255,255,.025); --surface-2: rgba(255,255,255,.05); }

/* ── Header / nav ───────────────────────────────────────── */
.r2-root[data-theme="light"] .r2-header,
html[data-theme="light"] .r2-header { background: rgba(245,240,232,.92); border-bottom-color: rgba(100,70,20,.15); }
.r2-root[data-theme="light"] .r2-nav a:hover { background: rgba(0,0,0,.05); color: #1c1208; }
.r2-root[data-theme="light"] .r2-nav a.active { color: #8b5a18; }
.r2-root[data-theme="light"] .r2-lang { background: rgba(0,0,0,.04); border-color: rgba(100,70,20,.15); }
.r2-root[data-theme="light"] .r2-lang button { color: #7a6a50; }
.r2-root[data-theme="light"] .r2-lang button.active { color: #1c1208; }
.r2-root[data-theme="light"] .r2-theme-btn { background: rgba(0,0,0,.06); border-color: rgba(100,70,20,.15); color: #3d2e18; }
.r2-root[data-theme="light"] .r2-theme-btn:hover { background: rgba(212,175,95,.18); border-color: rgba(212,175,95,.45); color: #8b5a18; }
.r2-root[data-theme="light"] .r2-burger { background: rgba(0,0,0,.06); border-color: rgba(100,70,20,.15); color: #3d2e18; }
.r2-root[data-theme="light"] .r2-burger:hover { color: #8b5a18; border-color: rgba(212,175,95,.45); }
html[data-theme="light"] .r2-mobile-menu { background: #ede7da; border-bottom-color: rgba(100,70,20,.2); }
.r2-root[data-theme="light"] .r2-btn { background: rgba(0,0,0,.04); border-color: rgba(100,70,20,.15); color: #1c1208; }
.r2-root[data-theme="light"] .r2-btn:hover { background: rgba(0,0,0,.08); border-color: rgba(100,70,20,.25); }
.r2-root[data-theme="light"] .r2-btn-support { color: #1a0e08; border-color: transparent; }

/* ── Footer ─────────────────────────────────────────────── */
.r2-root[data-theme="light"] .r2-footer,
html[data-theme="light"] .r2-footer { background: #ede7da; border-top-color: rgba(100,70,20,.15); color: #5c4d36; }
.r2-root[data-theme="light"] .r2-footer-left p { color: #7a6a50; }
.r2-root[data-theme="light"] .r2-footer-right a { color: #3d2e18; }
.r2-root[data-theme="light"] .r2-footer-right a:hover { color: #8b5a18; }

/* ── Shared card surfaces (members, tiers, generic) ─────── */
.r2-root[data-theme="light"] .r2-member,
.r2-root[data-theme="light"] .r2-tier { background: rgba(0,0,0,.035); border-color: rgba(100,70,20,.16); }
.r2-root[data-theme="light"] .r2-member:hover,
.r2-root[data-theme="light"] .r2-tier:hover { background: rgba(0,0,0,.07); border-color: rgba(100,70,20,.28); }
.r2-root[data-theme="light"] .r2-tier-arrow { background: rgba(0,0,0,.08); color: #5c4d36; }
.r2-root[data-theme="light"] .r2-tier-featured { background: linear-gradient(180deg, rgba(212,175,95,.28), rgba(212,175,95,.08) 70%); border-color: rgba(160,110,30,.45); box-shadow: 0 14px 30px -16px rgba(160,110,30,.35); }
.r2-root[data-theme="light"] .r2-tier-featured:hover { background: linear-gradient(180deg, rgba(212,175,95,.36), rgba(212,175,95,.12) 70%); border-color: rgba(160,110,30,.6); }
.r2-root[data-theme="light"] .r2-tier-featured .r2-tier-amount { color: #6a4012; }
.r2-root[data-theme="light"] .r2-tier-featured .r2-tier-label { color: rgba(60,40,12,.78); }
.r2-root[data-theme="light"] .r2-tier-featured .r2-tier-arrow { background: rgba(26,14,8,.18); color: #4a2e0d; }

/* ── Support section ────────────────────────────────────── */
.r2-root[data-theme="light"] .r2-support { background: #f5f0e8; }
.r2-root[data-theme="light"] .r2-support-why { color: #3d2e18; }
.r2-root[data-theme="light"] .r2-support-why em { color: #8b5a18; }
.r2-root[data-theme="light"] .r2-alts a { color: #3d2e18; border-bottom-color: rgba(160,110,30,.45); }
.r2-root[data-theme="light"] .r2-alts a:hover { color: #8b5a18; border-bottom-color: #8b5a18; }

/* ── Team section ───────────────────────────────────────── */
.r2-root[data-theme="light"] .r2-team { background: #f5f0e8; }

/* ── Sections grid / tiles ──────────────────────────────── */
.r2-root[data-theme="light"] .r2-sections { background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--tw-accent) 10%, transparent), transparent 60%), #f5f0e8; }
.r2-root[data-theme="light"] .r2-tile-frame { background: #e6dec8; border-color: rgba(100,70,20,.18); }
.r2-root[data-theme="light"] .r2-tile-fallback { background: repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 12px, transparent 12px 24px), linear-gradient(180deg, #d9d0b8, #c7bea1); }

/* ── White-card + counter (already light-on-white, just polish) ── */
.r2-root[data-theme="light"] .r2-white { background: #f0ebe0; }
.r2-root[data-theme="light"].v-premium .r2-white-title { background: linear-gradient(180deg, #1c1208, #3d2e18); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r2-root[data-theme="light"] .r2-counter-channel { color: #1c1208; }
.r2-root[data-theme="light"] .r2-counter-stat { color: #7a6a50; }
.r2-root[data-theme="light"] .r2-counter-stat strong { color: #1c1208; }
.r2-root[data-theme="light"] .r2-counter-label { color: #7a6a50; }

/* ── Hero stays cinematic — keep image+vignette, lighten gradient slightly ── */
.r2-root[data-theme="light"] .r2-hero-vignette { background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent, rgba(0,0,0,.5) 80%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 70%, rgba(245,240,232,.85) 100%); }

/* ── Gold gradient headings — rewrite for light bg ──
   Original gradient starts at near-white (#fff8ec) which dissolves into the
   cream page. Re-anchor the top stop to a deep bronze so all gradient titles
   read cleanly without losing the metallic feel. */
html[data-theme="light"] :is(
  .r2-section-h,
  .r2-section-h a,
  .r2-cat-title,
  .r2-vid-block-h,
  .r2-cg-block-h,
  .r2-cg-name,
  .r2-cg-portrait-fallback-letter,
  .r2-cal-month-label,
  .r2-sub-h,
  .r2-cmd-frame.is-error::after,
  .r2-post-kd-badge,
  .pack-num,
  .pack-price,
  .reward-tier-cost,
  .strat-num,
  .guide-wrap h1,
  .r2-guide-thumb-placeholder
) {
  background: linear-gradient(180deg, #4a2e0d 0%, #8b5a18 55%, #c08740 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
/* S-tier letter on commanders also uses the white→gold gradient — give it a
   slightly brighter range so it still pops vs the A/B/C tier letters. */
html[data-theme="light"] .r2-cmd-tier[data-tier="S"] .r2-cmd-tier-label {
  background-image: linear-gradient(180deg, #d4a020 0%, #b07818 55%, #8b5a18 100%) !important;
}

/* ════════════════════════════════════════════════════════
   Off-screen render skipping (perf)
   ════════════════════════════════════════════════════════ */
.r2-sections, .r2-team, .r2-support, .r2-footer,
.r2-cmd-sub, .r2-cat, .r2-equip-section .r2-carousel-grid,
.r2-links-grid, .r2-guides-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.r2-footer { contain-intrinsic-size: auto 200px; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .r2-tile:hover, .r2-cmd-card:hover, .r2-guide-card:hover, .r2-link-card:hover { transform: none !important; }
}