/* ═══════════════════════════════════════════════════════════
   PronoKick — Theme System (BeSoccer dark navy default)
   Dark navy is default. Light mode overrides via [data-theme="light"].
   Transition on color + background: 0.15s.
   No-flash: theme class applied inline before render in head.
   ═══════════════════════════════════════════════════════════ */

/* ── Theme transition — applied globally, disabled on prefers-reduced-motion ── */
/* WHY: Only background + color get transitions. Layout/transform transitions
   are NOT added here — that would break animation performance across the board. */
html.theme-ready *,
html.theme-ready *::before,
html.theme-ready *::after {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Override: keep specific fast interactions snappy (tab active indicator, etc.) */
html.theme-ready .pk-bn-item::before {
  transition: none !important;
}

/* ── Light mode token overrides ── */
[data-theme="light"] {
  /* Surfaces — warm light with BeSoccer structure */
  --bg:       #f0f2f5;
  --surface:  #ffffff;
  --surface2: #e8ebf0;
  --surface3: #dde1e8;

  /* Borders — subtle on white */
  --border:        rgba(0,0,0,0.1);
  --border-hover:  rgba(0,0,0,0.18);
  --border-accent: rgba(245,166,35,0.35);
  --border-green:  rgba(0,165,80,0.3);
  --border-gold:   rgba(245,197,24,0.25);

  /* Text — dark for readability */
  --text:           #1a1a2e;
  --text-secondary: #3d4555;
  --muted:          #6b7b8d;

  /* Semantic — light mode */
  --win:  #00a550;
  --loss: #d63031;
  --void: #6b7b8d;

  /* Accent — amber premium, slightly deeper for light bg contrast */
  --accent:       #D4901F;
  --accent-hover: #B87A1A;
  --accent-dim:   rgba(212,144,31,0.12);

  /* Shadows — subtle on light */
  --shadow-card:   none;
  --shadow-hover:  0 2px 8px rgba(0,0,0,0.1);
  --shadow-accent: 0 0 8px rgba(245,166,35,0.15);
  --shadow-green:  0 0 8px rgba(0,165,80,0.1);
}

/* ── Nav backdrop — light mode ── */
[data-theme="light"] nav {
  background: rgba(240,242,245,0.97);
}

/* ── Bottom nav — light mode ── */
[data-theme="light"] .pk-bottom-nav {
  background: rgba(240,242,245,0.97);
}


/* ── Sports hub strip — light mode ── */
[data-theme="light"] .pk-sports-hub-strip {
  background: rgba(0,0,0,0.03);
  border-bottom-color: rgba(0,0,0,0.08);
}

/* ── Skeleton shimmer — light mode ── */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
}

/* ── Dark mode badge backgrounds (unchanged — they already use rgba) ── */
/* No overrides needed — rgba-based backgrounds adapt naturally */

/* ── Theme toggle button — BeSoccer compact ── */
.pk-theme-toggle {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  line-height: 1;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.pk-theme-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Mobile more-drawer theme toggle item */
.pk-more-item.pk-more-theme {
  color: var(--text-secondary);
}
.pk-more-item.pk-more-theme .pk-more-icon {
  font-size: 1.1rem;
}

/* ── Reduced motion override — never animate theme transition ── */
@media (prefers-reduced-motion: reduce) {
  html.theme-ready *,
  html.theme-ready *::before,
  html.theme-ready *::after {
    transition: none !important;
  }
}