:root {
  /* Core brand */
  --app-accent: #2f6fed;
  --app-accent-soft: rgba(47, 111, 237, 0.12);

  /* Light theme */
  --app-bg: #f6f7fb;
  --app-surface: #ffffff;
  --app-surface-2: #f0f3f9;
  --app-border: #e6e8ef;
  --app-text: #111827;
  --app-muted: #6b7280;
  --app-nav-bg: rgba(255, 255, 255, 0.78);
  --app-nav-border: rgba(229, 231, 235, 0.85);

  --app-focus: rgba(47, 111, 237, 0.35);
}

:root[data-theme="dark"] {
  /* Dark theme */
  --app-accent-soft: rgba(47, 111, 237, 0.24);
  --app-bg: #0b1220;
  --app-surface: #0f172a;
  --app-surface-2: #111c34;
  --app-border: rgba(148, 163, 184, 0.22);
  --app-text: #e5e7eb;
  --app-muted: rgba(148, 163, 184, 0.88);
  --app-nav-bg: rgba(15, 23, 42, 0.86);
  --app-nav-border: rgba(148, 163, 184, 0.18);

  --app-focus: rgba(56, 189, 248, 0.32);
}

/* Teach Bootstrap about our theme tokens */
:root {
  --bs-primary: var(--app-accent);
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
}

:root[data-theme="dark"] {
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
}

html,
body {
  background: var(--app-bg);
  color: var(--app-text);
}

/* Bootstrap helper classes sometimes come with !important values.
   Keep theme switching consistent across all templates without touching markup too much. */
body.bg-light {
  background: var(--app-bg) !important;
}

/* Premium restraint: most pages use Bootstrap's `shadow-sm` everywhere.
   Remove the extra shadows so surfaces feel cohesive. */
.shadow-sm {
  box-shadow: none !important;
}

.card {
  background: var(--app-surface);
}

/* Consistent page rhythm */
.app-page {
  padding-top: 0.5rem;
}

/* Navbar shell */
.app-navbar {
  background: var(--app-nav-bg) !important;
  border-bottom: 1px solid var(--app-nav-border);
  backdrop-filter: blur(10px);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link {
  color: var(--app-muted) !important;
}

.app-navbar .nav-link.active {
  color: var(--app-text) !important;
  font-weight: 600;
}

.app-navbar .nav-link:hover {
  color: var(--app-text) !important;
}

/* Premium focus states */
:focus {
  outline: none;
}

:focus-visible {
  box-shadow: 0 0 0 3px var(--app-focus) !important;
  border-color: rgba(47, 111, 237, 0.55) !important;
}

/* Selection / focus polish */
::selection {
  background: var(--app-accent-soft);
}

/* Reduced motion: keep it calm and predictable */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Small typography polish */
body code,
pre code {
  background: rgba(47, 111, 237, 0.08);
  border: 1px solid rgba(47, 111, 237, 0.15);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}

/* Keep tables readable when theme flips */
.table {
  color: inherit;
}

.table thead th {
  border-bottom-color: var(--app-border);
}