/* Theme token system
   - semantic app tokens are the source of truth
   - legacy app vars are preserved as aliases for compatibility
   - Bootstrap vars are bridged to semantic tokens for consistency */

:root[data-theme="light"],
:root[data-bs-theme="light"] {
  /* Semantic app tokens */
  --app-text: #212529;
  --app-bg: #f0f0f4;
  --app-primary: rgb(18, 52, 102);
  --app-secondary: #6c757d;
  --app-accent: #20c997;
  --app-highlight-bg: #fff3cd;

  /* Layout surfaces */
  --app-navbar-bg: rgb(18, 52, 102);
  --app-navbar-text: #f8f9fa;
  --app-footer-bg: rgb(18, 52, 102);
  --app-footer-text: #f8f9fa;
  --app-dropdown-bg: #ffffff;
  --app-dropdown-text: #212529;
  --app-dropdown-hover-bg: #f8f9fa;

  /* Cards */
  --app-card-border: #dee2e6;
  --app-card-hover-bg: #f8f9fa;
  --app-card-hover-border: #ced4da;

  /* Active summary card */
  --app-active-card-bg: #e7f1ff;
  --app-active-card-border: #b6d4fe;
  --app-active-card-accent: rgb(18, 52, 102);
  --app-active-card-text: #0d1b2a;

  /* Legacy aliases used throughout custom.css */
  --text: var(--app-text);
  --background: var(--app-bg);
  --primary: var(--app-primary);
  --secondary: var(--app-secondary);
  --accent: var(--app-accent);
  --text-color: var(--app-text);
  --secondary-color: var(--app-secondary);
  --highlight-bg: var(--app-highlight-bg);
  --navbar-bg: var(--app-navbar-bg);
  --navbar-link-color: var(--app-navbar-text);
  --footer-bg: var(--app-footer-bg);
  --footer-text: var(--app-footer-text);
  --dropdown-bg: var(--app-dropdown-bg);
  --dropdown-text: var(--app-dropdown-text);
  --dropdown-hover-bg: var(--app-dropdown-hover-bg);
  --card-border: var(--app-card-border);
  --card-hover-bg: var(--app-card-hover-bg);
  --card-hover-border: var(--app-card-hover-border);
  --active-card-bg: var(--app-active-card-bg);
  --active-card-border: var(--app-active-card-border);
  --active-card-accent: var(--app-active-card-accent);
  --active-card-text: var(--app-active-card-text);

  /* Bootstrap bridges */
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-primary: var(--app-primary);
  --bs-secondary: var(--app-secondary);
  --bs-primary-dark: rgb(14, 40, 79);
  --bs-secondary-dark: #5c636a;
}

/* Season Statistics card: follow light/dark theme */
.season-stats-card {
  background-color: var(--background);
  color: var(--text-color);
  border-color: var(--card-border) !important;
}
.season-stats-card .season-stats-card-header {
  background-color: var(--card-hover-bg);
  color: var(--text-color);
  border-bottom: 1px solid var(--card-border);
}
.season-stats-card .season-stats-card-body {
  background-color: var(--background);
  color: var(--text-color);
}
.season-stats-card .table {
  color: inherit;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--highlight-bg);
  --bs-table-hover-bg: var(--card-hover-bg);
  --bs-table-border-color: var(--card-border);
}
.season-stats-card .table th,
.season-stats-card .table td {
  border-color: var(--card-border);
}

:root[data-theme="dark"],
:root[data-bs-theme="dark"] {
  /* Semantic app tokens */
  --app-text: #e9ecef;
  --app-bg: #0b0f14;
  --app-primary: rgb(18, 52, 102);
  --app-secondary: #adb5bd;
  --app-accent: #23855e;
  --app-highlight-bg: #2a2f33;

  /* Layout surfaces */
  --app-navbar-bg: rgb(18, 52, 102);
  --app-navbar-text: #f8f9fa;
  --app-footer-bg: rgb(18, 52, 102);
  --app-footer-text: #f8f9fa;
  --app-dropdown-bg: #343a40;
  --app-dropdown-text: #f8f9fa;
  --app-dropdown-hover-bg: #495057;

  /* Cards */
  --app-card-border: #343a40;
  --app-card-hover-bg: #2d3237;
  --app-card-hover-border: #3a4046;

  /* Active summary card */
  --app-active-card-bg: #0d1b2a;
  --app-active-card-border: #1b3a57;
  --app-active-card-accent: rgb(18, 52, 102);
  --app-active-card-text: #e9f2ff;

  /* Legacy aliases used throughout custom.css */
  --text: var(--app-text);
  --background: var(--app-bg);
  --primary: var(--app-primary);
  --secondary: var(--app-secondary);
  --accent: var(--app-accent);
  --text-color: var(--app-text);
  --secondary-color: var(--app-secondary);
  --highlight-bg: var(--app-highlight-bg);
  --navbar-bg: var(--app-navbar-bg);
  --navbar-link-color: var(--app-navbar-text);
  --footer-bg: var(--app-footer-bg);
  --footer-text: var(--app-footer-text);
  --dropdown-bg: var(--app-dropdown-bg);
  --dropdown-text: var(--app-dropdown-text);
  --dropdown-hover-bg: var(--app-dropdown-hover-bg);
  --card-border: var(--app-card-border);
  --card-hover-bg: var(--app-card-hover-bg);
  --card-hover-border: var(--app-card-hover-border);
  --active-card-bg: var(--app-active-card-bg);
  --active-card-border: var(--app-active-card-border);
  --active-card-accent: var(--app-active-card-accent);
  --active-card-text: var(--app-active-card-text);

  /* Bootstrap bridges */
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-primary: var(--app-primary);
  --bs-secondary: #6c757d;
  --bs-primary-dark: rgb(14, 40, 79);
  --bs-secondary-dark: #5c636a;
}