/* ============================================================
   Theme overrides — light & dark via data-bs-theme
   Load order: AFTER tokens.css, BEFORE dashboard.css
   ============================================================ */

/* ---- Light mode (default; tokens.css already sets these) ---- */
:root,
[data-bs-theme="light"] {
  --app-surface:          var(--c-ink-50);
  --app-surface-raised:   var(--c-ink-0);
  --app-surface-sunken:   var(--c-ink-100);
  --app-border:           var(--c-ink-200);
  --app-text:             var(--c-ink-900);
  --app-text-muted:       var(--c-ink-500);
  --app-text-heading:     var(--c-ink-900);

  --bs-body-bg:           var(--app-surface);
  --bs-body-color:        var(--app-text);
  --bs-border-color:      var(--app-border);
  --bs-tertiary-bg:       var(--app-surface-sunken);
  --bs-emphasis-color:    var(--app-text-heading);
  --bs-secondary-color:   var(--app-text-muted);
  --bs-heading-color:     var(--app-text-heading);

  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ---- Dark mode ---- */
[data-bs-theme="dark"] {
  --app-surface:          #0b1019;
  --app-surface-raised:   #111827;
  --app-surface-sunken:   #030712;
  --app-border:           #1f2937;
  --app-text:             #e5e7eb;
  --app-text-muted:       #9ca3af;
  --app-text-heading:     #f9fafb;
  --app-accent-subtle:    #1a1d08;

  --bs-body-bg:           var(--app-surface);
  --bs-body-color:        var(--app-text);
  --bs-border-color:      var(--app-border);
  --bs-tertiary-bg:       var(--app-surface-sunken);
  --bs-emphasis-color:    var(--app-text-heading);
  --bs-secondary-color:   var(--app-text-muted);
  --bs-heading-color:     var(--app-text-heading);

  /* Boost lime for dark-mode contrast */
  --bs-primary:           var(--c-lime-300);
  --bs-primary-rgb:       214, 224, 70;
  --bs-primary-text-emphasis: var(--c-lime-300);
  --bs-primary-bg-subtle:    #1a1d08;
  --bs-primary-border-subtle: #3d420e;

  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Component re-skin for dark mode — Bootstrap classes that don't auto-flip */
[data-bs-theme="dark"] .card {
  --bs-card-bg: var(--app-surface-raised);
  --bs-card-border-color: var(--app-border);
  --bs-card-cap-bg: var(--app-surface-sunken);
}

[data-bs-theme="dark"] .table {
  --bs-table-bg: var(--app-surface-raised);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

/* .table-light thead: Bootstrap forces a light bg in dark mode, leaving
   gray-on-white headers. Flip the bg/state vars so it adapts. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] thead.table-light th {
  --bs-table-bg: var(--app-surface-sunken);
  --bs-table-bg-state: var(--app-surface-sunken);
  --bs-table-color-state: var(--app-text);
  color: var(--app-text);
  background-color: var(--app-surface-sunken);
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--app-surface-raised);
  border-color: var(--app-border);
}

[data-bs-theme="dark"] .navbar {
  background-color: var(--app-surface-raised) !important;
  border-bottom-color: var(--app-border) !important;
}

/* Honor prefers-reduced-motion across theme transitions */
@media (prefers-reduced-motion: no-preference) {
  html { transition: background-color 0.2s ease, color 0.2s ease; }
}