:root{
  --bs-primary: #3b82f6;
  --bs-body-bg: #eef6ff;
  --bs-body-color: #0f172a;

  /* Bootstrap RGB var */
  --bs-primary-rgb: 59,130,246;

  /* Typography hooks (overridden by header inline vars if user set) */
  --lj-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --lj-text: var(--bs-body-color);
  --lj-font-size: 16px;
  --lj-surface: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
  --lj-surface-2: color-mix(in srgb, var(--bs-body-bg) 78%, #fff 22%);
  --lj-border-strong: color-mix(in srgb, var(--lj-border) 80%, transparent);

  --lj-success: #22c55e;
  --lj-danger: #ef4444;
  --lj-warning: #f59e0b;
  --lj-info: #06b6d4;
  --lj-success-rgb: 34,197,94;
  --lj-danger-rgb: 239,68,68;
  --lj-warning-rgb: 245,158,11;
  --lj-info-rgb: 6,182,212;

  /* ========== DREAMY GLASS TOKENS ========== */
  --lj-radius-sm: 12px;
  --lj-radius-md: 16px;
  --lj-radius-lg: 20px;
  --lj-radius-xl: 26px;

  --lj-blur: 18px;
  --lj-blur-strong: 26px;

  --lj-border: rgba(255,255,255,.58);
  --lj-border-soft: rgba(255,255,255,.42);

  --lj-glass: rgba(255,255,255,.62);
  --lj-glass-strong: rgba(255,255,255,.72);

  --lj-shadow-1: 0 14px 40px rgba(15,23,42,.10);
  --lj-shadow-2: 0 22px 60px rgba(15,23,42,.16);

  /* Accent “sparkle” */
  --lj-tint: rgba(var(--bs-primary-rgb), .14);
  --lj-tint-2: rgba(var(--bs-primary-rgb), .10);

  /* Background layers (used below) */
  --lj-bg: var(--bs-body-bg);

  /* Transition tokens */
  --lj-transition-fast: 160ms;
  --lj-transition-base: 260ms;
  --lj-transition-slow: 340ms;
  --lj-transition-ease: cubic-bezier(.22,.61,.36,1);
}

html{ font-size: var(--lj-font-size) !important; }
body{
  font-family: var(--lj-font) !important;
  color: var(--lj-text) !important;
  background: var(--lj-bg) !important;
  min-height: 100vh;
  transition:
    background var(--lj-transition-slow) var(--lj-transition-ease),
    background-color var(--lj-transition-slow) var(--lj-transition-ease),
    color var(--lj-transition-base) var(--lj-transition-ease),
    opacity var(--lj-transition-fast) var(--lj-transition-ease);
}

html,
body,
.bg-body,
.lj-page,
.lj-card,
.card,
.card-header,
.modal-content,
.modal-header,
.modal-footer,
.navbar,
.nav-link,
.dropdown-menu,
.btn,
.form-control,
.form-select,
.list-group-item{
  transition:
    color var(--lj-transition-base) var(--lj-transition-ease),
    background-color var(--lj-transition-base) var(--lj-transition-ease),
    border-color var(--lj-transition-base) var(--lj-transition-ease),
    box-shadow var(--lj-transition-base) var(--lj-transition-ease),
    filter var(--lj-transition-base) var(--lj-transition-ease),
    transform var(--lj-transition-fast) var(--lj-transition-ease),
    opacity var(--lj-transition-fast) var(--lj-transition-ease);
}

html.lj-theme-changing body{
  opacity: .985;
}

@media (prefers-reduced-motion: reduce){
  html,
  body,
  .bg-body,
  .lj-page,
  .lj-card,
  .card,
  .card-header,
  .modal-content,
  .modal-header,
  .modal-footer,
  .navbar,
  .nav-link,
  .dropdown-menu,
  .btn,
  .form-control,
  .form-select,
  .list-group-item{
    transition: none !important;
    animation: none !important;
  }
}

/* ====== DREAMY BACKGROUND ====== */
body{
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(56,189,248,.38), transparent 60%),
    radial-gradient(900px 600px at 80% 18%, rgba(167,139,250,.34), transparent 58%),
    radial-gradient(1100px 700px at 62% 86%, rgba(251,113,133,.22), transparent 60%),
    radial-gradient(900px 650px at 12% 90%, rgba(34,197,94,.12), transparent 55%),
    linear-gradient(180deg, #eaf5ff 0%, #f4f2ff 40%, #fff7fb 100%) !important;
  background-attachment: fixed !important;
}

/* soft “mist” overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 35% 30%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 500px at 70% 60%, rgba(255,255,255,.40), transparent 65%);
}

/* Dark mode background */

/* ====== GLOBAL GLASS CARD HELPERS (so it doesn’t look “bootstrap default”) ====== */
.lj-card,
.card.lj-card,
.modal-content{
  background: var(--lj-glass) !important;
  border: 1px solid var(--lj-border) !important;
  border-radius: var(--lj-radius-xl) !important;
  box-shadow: var(--lj-shadow-1) !important;
  backdrop-filter: blur(var(--lj-blur));
  -webkit-backdrop-filter: blur(var(--lj-blur));
}

.lj-card-header,
.card-header{
  background: rgba(255,255,255,.22) !important;
  border-bottom: 1px solid var(--lj-border-soft) !important;
}

.btn, .lj-btn{
  border-radius: 999px !important;
  font-weight: 800;
}

.btn-primary, .lj-btn-primary{
  background: rgba(var(--bs-primary-rgb), .92) !important;
  border-color: rgba(var(--bs-primary-rgb), .92) !important;
}

.btn-outline-primary{
  background: rgba(var(--bs-primary-rgb), .10) !important;
  border-color: rgba(var(--bs-primary-rgb), .22) !important;
}