/* —— Tokens thème TCG (data-bs-theme) —— */

[data-bs-theme=light] {
  color-scheme: light;

  --tcg-bg: #f8f9fa;
  --tcg-bg-elevated: #ffffff;
  --tcg-surface: #ffffff;
  --tcg-surface-muted: #f3f1ec;
  --tcg-surface-deep: #e8e4db;
  --tcg-ink: #0c1020;
  --tcg-ink-soft: #1a2035;
  --tcg-ink-muted: #8b95ad;
  --tcg-fog: #c8cfe0;
  --tcg-border: rgba(12, 16, 32, 0.1);
  --tcg-border-strong: rgba(12, 16, 32, 0.18);
  --tcg-shadow: rgba(12, 16, 32, 0.14);
  --tcg-shadow-strong: rgba(12, 16, 32, 0.22);
  --tcg-accent: #c9a227;
  --tcg-accent-hot: #e0b83a;
  --tcg-danger: #b91c1c;
  --tcg-danger-soft: #fef2f2;
  --tcg-on-accent: #ffffff;
  /* Surfaces toujours sombres (boutons ink, headers chrome) — indépendantes du texte */
  --tcg-btn-ink: #0c1020;
  --tcg-btn-ink-hover: #1a2035;
  --tcg-on-gold: #0c1020;
  --tcg-nav-ink: #0c1020;
  --tcg-nav-ink-soft: #1a2035;
  --tcg-nav-mist: rgba(255, 255, 255, 0.62);
  --tcg-magic: #3d5a80;
  --tcg-yugioh: #b45309;
  --tcg-footer-bg: #f5f5f5;
  --tcg-input-bg: #ffffff;
  --tcg-table-stripe: rgba(12, 16, 32, 0.03);
  --tcg-overlay-scrim: rgba(12, 16, 32, 0.45);
}

[data-bs-theme=dark] {
  color-scheme: dark;

  --tcg-bg: #343a40;
  --tcg-bg-elevated: #3e444a;
  --tcg-surface: #3e444a;
  --tcg-surface-muted: #2f343a;
  --tcg-surface-deep: #272b30;
  --tcg-ink: #e9ecef;
  --tcg-ink-soft: #ced4da;
  --tcg-ink-muted: #aab8c5;
  --tcg-fog: #6c757d;
  --tcg-border: rgba(255, 255, 255, 0.12);
  --tcg-border-strong: rgba(255, 255, 255, 0.2);
  --tcg-shadow: rgba(0, 0, 0, 0.35);
  --tcg-shadow-strong: rgba(0, 0, 0, 0.5);
  --tcg-accent: #d4af37;
  --tcg-accent-hot: #e8c547;
  --tcg-danger: #f87171;
  --tcg-danger-soft: rgba(248, 113, 113, 0.15);
  --tcg-on-accent: #0c1020;
  /* Surfaces toujours sombres (boutons ink, headers chrome) — indépendantes du texte */
  --tcg-btn-ink: #0c1020;
  --tcg-btn-ink-hover: #1a2035;
  --tcg-on-gold: #0c1020;
  --tcg-nav-ink: #1a1f2b;
  --tcg-nav-ink-soft: #12161f;
  --tcg-nav-mist: rgba(255, 255, 255, 0.68);
  --tcg-magic: #7aa2c9;
  --tcg-yugioh: #f0a35a;
  --tcg-footer-bg: #2b3035;
  --tcg-input-bg: #2f343a;
  --tcg-table-stripe: rgba(255, 255, 255, 0.04);
  --tcg-overlay-scrim: rgba(0, 0, 0, 0.55);
}

/* Surfaces globales app */
body {
  background-color: var(--tcg-bg);
  color: var(--tcg-ink);
}

.footer {
  background-color: var(--tcg-footer-bg) !important;
  color: var(--tcg-ink-muted);
  border-top: 1px solid var(--tcg-border);
}

.breadcrumb {
  --ct-breadcrumb-divider-color: var(--tcg-ink-muted);
  --ct-breadcrumb-item-active-color: var(--tcg-ink);
  --bs-breadcrumb-divider-color: var(--tcg-ink-muted);
  --bs-breadcrumb-item-active-color: var(--tcg-ink);
}

.breadcrumb-item a {
  color: var(--tcg-ink) !important;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
  color: var(--tcg-accent) !important;
}

.breadcrumb-item.active {
  color: var(--tcg-ink-muted) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--tcg-ink-muted);
}

/* Cards Bootstrap / Hyper courantes */
.card {
  background-color: var(--tcg-surface);
  border-color: var(--tcg-border);
  color: var(--tcg-ink);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tcg-ink);
  --bs-table-border-color: var(--tcg-border);
  --bs-table-striped-bg: var(--tcg-table-stripe);
  --bs-table-hover-bg: var(--tcg-table-stripe);
  color: var(--tcg-ink);
}

.form-control,
.form-select {
  background-color: var(--tcg-input-bg);
  border-color: var(--tcg-border);
  color: var(--tcg-ink);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--tcg-input-bg);
  color: var(--tcg-ink);
  border-color: var(--tcg-accent);
}

.form-control::placeholder {
  color: var(--tcg-ink-muted);
}

.modal-content {
  background-color: var(--tcg-surface);
  color: var(--tcg-ink);
  border-color: var(--tcg-border);
}

.dropdown-menu {
  background-color: var(--tcg-surface);
  border-color: var(--tcg-border);
  color: var(--tcg-ink);
}

.dropdown-item {
  color: var(--tcg-ink);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--tcg-surface-muted);
  color: var(--tcg-ink);
}

.list-group-item {
  background-color: var(--tcg-surface);
  border-color: var(--tcg-border);
  color: var(--tcg-ink);
}

.text-muted {
  color: var(--tcg-ink-muted) !important;
}

.alert {
  border-color: var(--tcg-border);
}

hr {
  border-color: var(--tcg-border);
  opacity: 1;
}