/*
 * Canonical light theme for the tactical FPL Analyzer interface.
 * Loaded after every component stylesheet so legacy theme fragments cannot
 * reintroduce warm gradients, glass, purple, or inaccessible status colours.
 */

:root.light-mode {
  color-scheme: light;
  --pl-purple: #f7f7f5;
  --pl-purple2: #efefec;
  --pl-purple3: #f7f7f5;
  --pl-card: #ffffff;
  --pl-card2: #e8e8e5;
  --pl-overlay: rgba(255, 255, 255, 0.97);
  --pl-green: #087f91;
  --pl-cyan: #087f91;
  --pl-magenta: #0f766e;
  --pl-yellow: #825500;
  --pl-red: #a52d25;
  --pl-orange: #825500;
  --pl-deep: #efefec;

  --text-primary: #101012;
  --text-secondary: #45454a;
  --text-muted: #69696f;
  --border: rgba(16, 16, 18, 0.1);
  --border-bright: rgba(8, 127, 145, 0.45);
  --input-bg: #ffffff;
  --input-border: rgba(16, 16, 18, 0.16);
  --input-color: #101012;
  --header-bg: rgba(247, 247, 245, 0.96);
  --nav-bg: #efefec;
  --nav-border: rgba(16, 16, 18, 0.1);
  --nav-btn-text: #69696f;
  --nav-btn-hover: #101012;
  --nav-btn-hover-bg: rgba(16, 16, 18, 0.055);
  --nav-btn-active: #101012;

  --tac-canvas: #f7f7f5;
  --tac-plane: #efefec;
  --tac-recessed: #e8e8e5;
  --tac-surface: #ffffff;
  --tac-raised: #e8e8e5;
  --tac-ink: #101012;
  --tac-muted: #69696f;
  --tac-cyan: #087f91;
  --tac-teal: #0f766e;
  --tac-green: #2f6f3e;
  --tac-amber: #825500;
  --tac-red: #a52d25;
  --tac-green-soft: #edf7ef;
  --tac-amber-soft: #fff5e3;
  --tac-red-soft: #fbedec;
  --tac-spectrum: var(--brand-gradient, linear-gradient(90deg, #c21500, #ffc500));

  --league-panel-bg: #ffffff;
  --scrollbar-track: #efefec;
  --scrollbar-thumb: #a7a7a2;
  --scrollbar-thumb-hover: #087f91;
  --shadow: 0 18px 42px rgba(16, 16, 18, 0.11);
  --shadow-card: 0 10px 26px rgba(16, 16, 18, 0.07);
  --shadow-hover: 0 16px 34px rgba(16, 16, 18, 0.12);
  --glow-green: none;
}

:root.light-mode html,
:root.light-mode body {
  background: var(--tac-canvas) !important;
  color: var(--text-primary);
}

:root.light-mode body::before {
  background: linear-gradient(180deg, rgba(8, 127, 145, 0.025), transparent 22rem);
}

:root.light-mode .bg-mesh,
:root.light-mode .liquid-bg,
:root.light-mode .ambient-glow {
  display: none !important;
}

:root.light-mode *::selection {
  color: #ffffff;
  background: #087f91;
}

/* Shell and navigation */
:root.light-mode .header,
:root.light-mode .main-tabs,
:root.light-mode .tactical-mobile-drawer,
:root.light-mode .tactical-mobile-drawer-panel {
  color: var(--text-primary);
  background: var(--header-bg) !important;
  border-color: var(--border) !important;
  box-shadow: none;
}

:root.light-mode .header .logo-img {
  box-shadow: none;
}

:root.light-mode .season-pill,
:root.light-mode .gw-badge,
:root.light-mode .mode-toggle-container,
:root.light-mode .x-follow,
:root.light-mode .mini-league-join {
  color: var(--text-secondary);
  background: var(--tac-plane) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

:root.light-mode .mode-toggle-btn.active,
:root.light-mode .tab-btn.active,
:root.light-mode .tactical-mobile-more[aria-expanded='true'] {
  color: var(--text-primary) !important;
  background: var(--tac-raised) !important;
  box-shadow: none !important;
}

:root.light-mode .auth-btn,
:root.light-mode .mc-btn.primary,
:root.light-mode .mc-btn-primary,
:root.light-mode .analyze-btn,
:root.light-mode .cookie-btn.primary,
:root.light-mode .formation-btn.primary,
:root.light-mode button.primary {
  color: #ffffff !important;
  background: #087f91 !important;
  border-color: #087f91 !important;
  box-shadow: none !important;
}

/* The retired glass layer uses unusually specific important selectors for
   primary controls. Match that layer so the accessible light foreground wins. */
html:root.light-mode body #authBtn:not(.logged-in),
html:root.light-mode body #viewLanding .mc-btn.mc-btn-primary,
html:root.light-mode body #analyzeBtn,
html:root.light-mode body #cookieOverlay .cookie-btn.cookie-btn.primary,
html:root.light-mode body .simple-primary-btn,
html:root.light-mode body .primary-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #087f91 !important;
  border-color: #087f91 !important;
}

:root.light-mode .auth-btn.logged-in {
  color: var(--text-primary) !important;
  background: #ffffff !important;
  border-color: var(--border) !important;
}

/* Flat working surfaces */
:root.light-mode :where(
  .panel,
  .score-card,
  .simple-card,
  .landing-card,
  .mc-final-card,
  .glass-card,
  .dashboard-card,
  .analysis-card,
  .player-card,
  .modal-content,
  .dialog-content,
  .cookie-modal-content,
  .account-modal-content,
  .chatfpl-sidebar-panel,
  .chatfpl-main,
  .chatfpl-input-zone,
  .chatfpl-composer,
  .planner-chat-composer,
  .supercomputer-card,
  .league-card,
  .tool-card,
  .settings-card
) {
  color: var(--text-primary);
  background: var(--tac-surface) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root.light-mode :where(.panel, .score-card, .simple-card, .landing-card, .player-card) :where(h1, h2, h3, h4, strong) {
  color: var(--text-primary);
}

:root.light-mode :where(.panel, .score-card, .simple-card, .landing-card, .player-card) :where(p, small, .subtitle, .description, .meta) {
  color: var(--text-secondary);
}

/* Inputs and compact controls */
:root.light-mode :where(input, textarea, select, .fpl-input, .chatfpl-input, .planner-chat-input) {
  color: var(--input-color) !important;
  caret-color: #087f91;
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  box-shadow: none !important;
}

:root.light-mode :where(input, textarea)::placeholder {
  color: #69696f !important;
  opacity: 1;
}

:root.light-mode :where(
  .filter-btn,
  .chip,
  .formation-btn,
  .secondary-btn,
  .icon-btn,
  .chatfpl-chip,
  .planner-chat-chip,
  .composer-action,
  .results-subnav button
) {
  color: var(--text-secondary) !important;
  background: var(--tac-plane) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

:root.light-mode :where(.filter-btn.active, .chip.active, .formation-btn.active, .results-subnav button.active) {
  color: #ffffff !important;
  background: #087f91 !important;
  border-color: #087f91 !important;
}

/* Data tables and analytical output */
:root.light-mode :where(table, .data-table, .league-table) {
  color: var(--text-primary);
  background: #ffffff !important;
  border-color: var(--border) !important;
}

:root.light-mode :where(th, .table-header, .data-table thead) {
  color: var(--text-secondary) !important;
  background: var(--tac-plane) !important;
  border-color: var(--border) !important;
}

:root.light-mode :where(td, tr, .table-row) {
  border-color: var(--border) !important;
}

@media (hover: hover) and (pointer: fine) {
  :root.light-mode :where(tbody tr, .table-row):hover {
    background: rgba(16, 16, 18, 0.035) !important;
  }
}

/* Accessible semantic states */
:root.light-mode :where(.gw-live, .status-positive, .positive, .success, .opportunity) {
  color: #2f6f3e !important;
  background: #edf7ef !important;
  border-color: #b9d9c0 !important;
}

:root.light-mode :where(.gw-upcoming, .status-warning, .warning, .caution) {
  color: #825500 !important;
  background: #fff5e3 !important;
  border-color: #e8c784 !important;
}

:root.light-mode :where(.gw-finished, .status-danger, .negative, .error, .risk) {
  color: #a52d25 !important;
  background: #fbedec !important;
  border-color: #dcb1ad !important;
}

:root.light-mode :where(.fdr-scale, .risk-spectrum, .spectrum-bar, .fixture-spectrum) {
  /* Actual difficulty scales must keep their labeled easy-to-hard meaning. */
  background: linear-gradient(90deg, var(--fdr-1), var(--fdr-3) 50%, var(--fdr-5)) !important;
}

/* Chat and message boxes */
:root.light-mode :where(.chat-message, .chat-msg, .message, .assistant-message, .planner-message) {
  color: var(--text-primary) !important;
  background: var(--tac-plane) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

:root.light-mode :where(.chat-message.user, .chat-msg.user, .message.user, .user-message) {
  color: #ffffff !important;
  background: #087f91 !important;
  border-color: #087f91 !important;
}

:root.light-mode :where(.chat-message, .chat-msg, .message) a {
  color: #0f766e !important;
}

:root.light-mode :where(.chat-message.user, .chat-msg.user, .message.user) a {
  color: #ffffff !important;
}

/* Dialogs, cookies and transient UI */
:root.light-mode :where(.modal-overlay, .dialog-overlay, .cookie-overlay, .drawer-backdrop) {
  background: rgba(16, 16, 18, 0.42) !important;
  backdrop-filter: none !important;
}

:root.light-mode :where(.toast, .notification, .empty-state, .loading-state) {
  color: var(--text-primary) !important;
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}

:root.light-mode :where(.skeleton, .shimmer, [class*='skeleton']) {
  background: linear-gradient(90deg, #e8e8e5 25%, #f7f7f5 45%, #e8e8e5 65%) !important;
  background-size: 200% 100% !important;
}

/* Charts and pitch surroundings stay legible without recolouring club kits. */
:root.light-mode :where(.chart-container, .chart-wrap, .pitch-wrap, .team-pitch-container) {
  color: var(--text-primary);
  border-color: var(--border) !important;
  box-shadow: none !important;
}

:root.light-mode :where(.chart-grid, .chart-grid line, .grid-line) {
  stroke: rgba(16, 16, 18, 0.13) !important;
}

:root.light-mode :where(.chart-label, .axis-label, .tick text) {
  color: #45454a !important;
  fill: #45454a !important;
}

/* Landing data tiles use opaque light surfaces so labels never inherit the
   old translucent Mercury background during loading or partial API states. */
html:root.light-mode body #viewLanding .lc-icon {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #0f766e !important;
  border-color: #0f766e !important;
  opacity: 1 !important;
}

html:root.light-mode body #viewLanding .lc-stat,
html:root.light-mode body #viewLanding .kpi {
  color: var(--text-primary) !important;
  background: #ffffff !important;
  border-color: rgba(16, 16, 18, 0.12) !important;
}

html:root.light-mode body #viewLanding .lc-stat-val {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
}

html:root.light-mode body #viewLanding :where(.lc-stat-lbl, .kpi-label) {
  color: #45454a !important;
  -webkit-text-fill-color: #45454a !important;
}

:root.light-mode .footer {
  color: var(--text-secondary);
  background: var(--tac-plane) !important;
  border-color: var(--border) !important;
}

:root.light-mode .footer a {
  color: #0f766e;
}

html:root.light-mode body .footer-disclaimer {
  color: #69696f !important;
  -webkit-text-fill-color: #69696f !important;
}

/* Standalone specification and screenshot-tour pages. */
:root.light-mode :where(.spec-container, .tour-container) {
  color: var(--text-primary) !important;
}

:root.light-mode :where(
  .spec-header,
  .spec-content,
  .spec-screenshot-card,
  .tour-card,
  .card-info,
  .disambiguation-bar,
  .warning-callout
) {
  color: var(--text-primary) !important;
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

:root.light-mode :where(.spec-container, .tour-container) :where(p, li, .card-info p) {
  color: var(--text-secondary) !important;
}

:root.light-mode :where(.badge, .category-pill) {
  color: #0f766e !important;
  background: #edf7ef !important;
  border-color: #b9d9c0 !important;
}

:root.light-mode :where(.filter-btn, .back-btn) {
  color: var(--text-secondary) !important;
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

:root.light-mode .filter-btn.active {
  color: #ffffff !important;
  background: #087f91 !important;
  border-color: #087f91 !important;
}

@media (hover: hover) and (pointer: fine) {
  :root.light-mode :where(.panel, .score-card, .simple-card, .landing-card, .player-card):hover {
    border-color: rgba(16, 16, 18, 0.18) !important;
    box-shadow: var(--shadow-hover) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root.light-mode *,
  :root.light-mode *::before,
  :root.light-mode *::after {
    scroll-behavior: auto !important;
  }
}