/* L4G.online — light/dark theme tokens and visual redesign overrides */

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #111318;
  --color-section-muted: #151922;
  --color-surface: #1b202b;
  --color-accent-light: #232a37;
  --color-text: #f4f6fa;
  --color-text-muted: #a6afbe;
  --color-text-faint: #7d8797;
  --color-accent: #5b8cff;
  --color-accent-hover: #78a0ff;
  --color-accent-deep: #3d6fd9;
  --color-border: #303847;
  --color-hero-dark: #0c0e12;
  --color-success: #42c994;
  --color-warning: #f5b95f;
  --color-error: #f16b78;
  --header-bg: rgba(17, 19, 24, 0.88);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
  --hero-scrim: linear-gradient(
    105deg,
    rgba(17, 19, 24, 0.94) 0%,
    rgba(17, 19, 24, 0.82) 32%,
    rgba(17, 19, 24, 0.45) 55%,
    rgba(17, 19, 24, 0.12) 72%,
    transparent 100%
  );
  --hero-scrim-mobile: linear-gradient(
    to top,
    rgba(17, 19, 24, 0.96) 0%,
    rgba(17, 19, 24, 0.88) 40%,
    rgba(17, 19, 24, 0.35) 65%,
    transparent 100%
  );
  --focus-ring: 0 0 0 3px rgba(91, 140, 255, 0.45);
  --cta-bg: linear-gradient(135deg, #2a4a9e 0%, #1b202b 55%, #151922 100%);
  --mesh-accent: rgba(91, 140, 255, 0.12);
  --forum-section-scrim: linear-gradient(
    100deg,
    rgba(17, 19, 24, 0.82) 0%,
    rgba(17, 19, 24, 0.45) 26%,
    rgba(17, 19, 24, 0.12) 42%,
    transparent 58%
  );
  --benefits-section-scrim: linear-gradient(
    100deg,
    rgba(17, 19, 24, 0.88) 0%,
    rgba(17, 19, 24, 0.5) 30%,
    rgba(17, 19, 24, 0.15) 46%,
    transparent 62%
  );
}

html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f5f7fb;
  --color-section-muted: #eef2f8;
  --color-surface: #ffffff;
  --color-accent-light: #eef2f8;
  --color-text: #172033;
  --color-text-muted: #536075;
  --color-text-faint: #707c90;
  --color-accent: #356be8;
  --color-accent-hover: #2456c7;
  --color-accent-deep: #2456c7;
  --color-border: #dfe5ef;
  --color-hero-dark: #172033;
  --color-success: #1f9d6a;
  --color-warning: #c9852e;
  --color-error: #d94a58;
  --header-bg: rgba(245, 247, 251, 0.92);
  --shadow-sm: 0 1px 3px rgba(23, 32, 51, 0.08);
  --shadow-md: 0 10px 32px rgba(23, 32, 51, 0.1);
  --shadow-card: 0 4px 18px rgba(23, 32, 51, 0.07);
  --hero-scrim: linear-gradient(
    105deg,
    rgba(245, 247, 251, 0.97) 0%,
    rgba(245, 247, 251, 0.9) 30%,
    rgba(245, 247, 251, 0.5) 52%,
    rgba(245, 247, 251, 0.08) 70%,
    transparent 100%
  );
  --hero-scrim-mobile: linear-gradient(
    to top,
    rgba(245, 247, 251, 0.98) 0%,
    rgba(245, 247, 251, 0.92) 38%,
    rgba(245, 247, 251, 0.35) 62%,
    transparent 100%
  );
  --focus-ring: 0 0 0 3px rgba(53, 107, 232, 0.35);
  --cta-bg: linear-gradient(135deg, #356be8 0%, #2456c7 100%);
  --mesh-accent: rgba(53, 107, 232, 0.1);
  --forum-section-scrim: linear-gradient(
    100deg,
    rgba(245, 247, 251, 0.88) 0%,
    rgba(245, 247, 251, 0.5) 26%,
    rgba(245, 247, 251, 0.15) 42%,
    transparent 58%
  );
  --benefits-section-scrim: linear-gradient(
    100deg,
    rgba(245, 247, 251, 0.92) 0%,
    rgba(245, 247, 251, 0.55) 30%,
    rgba(245, 247, 251, 0.18) 46%,
    transparent 62%
  );
}

html {
  --hero-min-height: clamp(16rem, 38vh, 26rem);
  --radius-md: 8px;
  --radius-lg: 10px;
  --transition-theme: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    --transition-theme: none;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: var(--transition-theme);
}

.site-header {
  background: var(--header-bg);
  border-bottom-color: var(--color-border);
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) brightness(0.92);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.theme-toggle__icon {
  font-size: 1.125rem;
  line-height: 1;
}

.theme-toggle__icon--sun,
.theme-toggle__icon--moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle__icon--sun {
  display: block;
}

html[data-theme="light"] .theme-toggle__icon--moon {
  display: block;
}

.hero {
  min-height: var(--hero-min-height);
  border-bottom-color: var(--color-border);
}

.hero__scrim {
  background: var(--hero-scrim);
}

@media (max-width: 767.98px) {
  .hero__scrim {
    background: var(--hero-scrim-mobile);
  }
}

.hero__mesh {
  grid-area: 1 / 1;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 85% 20%, var(--mesh-accent), transparent 55%),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 48px,
      rgba(255, 255, 255, 0.015) 48px,
      rgba(255, 255, 255, 0.015) 49px
    );
  opacity: 0.9;
}

html[data-theme="light"] .hero__mesh {
  background:
    radial-gradient(ellipse 70% 50% at 88% 15%, var(--mesh-accent), transparent 50%),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 48px,
      rgba(23, 32, 51, 0.03) 48px,
      rgba(23, 32, 51, 0.03) 49px
    );
}

.hero__status {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.hero__status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(66, 201, 148, 0.25);
  animation: hero-pulse 2.5s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.hero__eyebrow {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.hero__brand-mark {
  color: var(--color-accent);
  opacity: 0.06;
}

.hero__title {
  max-width: 14ch;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
}

.hero__lead {
  color: var(--color-text-muted);
}

.hero__rule {
  background: linear-gradient(90deg, var(--color-accent), transparent);
  width: 4rem;
  animation: hero-line-grow 0.8s ease-out both;
  animation-delay: 0.15s;
}

@keyframes hero-line-grow {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
  }
}

.hero__copy.is-entered .hero__eyebrow,
.hero__copy.is-entered .hero__title,
.hero__copy.is-entered .hero__lead,
.hero__copy.is-entered .hero__actions {
  animation: hero-fade-up 0.55s ease-out both;
}

.hero__copy.is-entered .hero__title {
  animation-delay: 0.08s;
}

.hero__copy.is-entered .hero__lead {
  animation-delay: 0.16s;
}

.hero__copy.is-entered .hero__actions {
  animation-delay: 0.24s;
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-btn--primary {
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-active-border-color: var(--color-accent-hover);
}

.site-btn--primary:hover {
  box-shadow: 0 6px 20px rgba(91, 140, 255, 0.28);
}

html[data-theme="light"] .site-btn--primary:hover {
  box-shadow: 0 6px 18px rgba(53, 107, 232, 0.25);
}

.section--find-players {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-section-muted) 100%);
}

.section--games {
  background: var(--color-bg);
}

.section--forum {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-hero-dark);
  background-image: var(--forum-section-scrim), url("../images/raindow.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 22%;
}

.section--forum .section__kicker,
.section--forum .section__title,
.section--forum .section__intro {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] .section--forum .section__kicker,
html[data-theme="light"] .section--forum .section__title,
html[data-theme="light"] .section--forum .section__intro {
  text-shadow: 0 1px 14px rgba(245, 247, 251, 0.95), 0 0 1px rgba(23, 32, 51, 0.25);
}

.section--forum > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 991.98px) {
  html[data-theme="dark"] .section--forum {
    --forum-section-scrim: linear-gradient(
      to top,
      rgba(17, 19, 24, 0.88) 0%,
      rgba(17, 19, 24, 0.45) 38%,
      rgba(17, 19, 24, 0.08) 58%,
      transparent 78%
    );
  }

  html[data-theme="light"] .section--forum {
    --forum-section-scrim: linear-gradient(
      to top,
      rgba(245, 247, 251, 0.92) 0%,
      rgba(245, 247, 251, 0.48) 38%,
      rgba(245, 247, 251, 0.1) 58%,
      transparent 78%
    );
  }

  .section--forum {
    background-position: center 28%;
  }
}

.section-backdrop--tarkov {
  position: relative;
  overflow: hidden;
  background-color: var(--color-hero-dark);
  background-image: var(--benefits-section-scrim), url("../images/tarkov-converted.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 22%;
}

.section-backdrop--tarkov .section--benefits {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.section-backdrop--tarkov .section--cta {
  padding-top: 0;
}

.section--benefits {
  position: relative;
  background: transparent;
}

.section--benefits .section__title,
.section--benefits .section__intro,
.section--benefits .benefits-list__item {
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] .section--benefits .section__title,
html[data-theme="light"] .section--benefits .section__intro,
html[data-theme="light"] .section--benefits .benefits-list__item {
  text-shadow: 0 1px 12px rgba(245, 247, 251, 0.95), 0 0 1px rgba(23, 32, 51, 0.2);
}

.section-backdrop--tarkov .section > .container {
  position: relative;
  z-index: 1;
}

.section--benefits .benefits-list {
  background: rgba(27, 32, 43, 0.55);
  border-radius: var(--radius-lg);
  padding: 0 1rem;
  border-top-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

html[data-theme="light"] .section--benefits .benefits-list {
  background: rgba(255, 255, 255, 0.72);
  border-top-color: var(--color-border);
}

@media (max-width: 991.98px) {
  html[data-theme="dark"] .section-backdrop--tarkov {
    --benefits-section-scrim: linear-gradient(
      to top,
      rgba(17, 19, 24, 0.9) 0%,
      rgba(17, 19, 24, 0.48) 40%,
      rgba(17, 19, 24, 0.1) 60%,
      transparent 80%
    );
  }

  html[data-theme="light"] .section-backdrop--tarkov {
    --benefits-section-scrim: linear-gradient(
      to top,
      rgba(245, 247, 251, 0.94) 0%,
      rgba(245, 247, 251, 0.5) 40%,
      rgba(245, 247, 251, 0.12) 60%,
      transparent 80%
    );
  }

  .section-backdrop--tarkov {
    background-position: center 30%;
  }
}

.text-link {
  color: var(--color-accent-deep);
}

.hero__secondary-link {
  color: var(--color-text);
}

.find-paths--editorial {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.find-path--feature {
  background: var(--color-accent-light);
}

.game-tile {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.game-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(91, 140, 255, 0.35);
}

.forum-panel {
  box-shadow: var(--shadow-card);
}

.forum-list__item:hover {
  background: var(--color-accent-light);
}

.cta-panel {
  background: var(--cta-bg);
  box-shadow: var(--shadow-md);
}

.site-footer {
  background: var(--color-section-muted);
}

.legal-callout {
  background: var(--color-accent-light);
}

.legal-callout--notice {
  background: var(--color-section-muted);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__status-dot,
  .hero__rule,
  .hero__copy.is-entered .hero__eyebrow,
  .hero__copy.is-entered .hero__title,
  .hero__copy.is-entered .hero__lead,
  .hero__copy.is-entered .hero__actions {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.site-nav__actions {
  gap: 0.5rem;
}

@media (max-width: 991.98px) {
  .site-nav__actions .theme-toggle {
    align-self: flex-start;
  }
}