: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;

  /* ========== 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);
}

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;
}

/* ====== 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;
}