/* ════════════════════════════════════════════════════════════
   AETHERIC INTELLIGENCE — Global Glassmorphism Layer
   Loaded last, on every page. Adds internal luminescence,
   backdrop-blur, light-catching metallic edges and glow to any
   surface following this codebase's existing naming conventions
   (*card*, *panel*, *modal*, .sidebar, .topbar, .navbar, *chip*,
   *badge*, .nav-item, .path-option) without touching the color
   choices each page/file already makes via its own tokens.
   ════════════════════════════════════════════════════════════ */

html { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

body {
  position: relative;
  font-weight: var(--font-weight-body, 300);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.logo-text, .brand, [class*="title"], [class*="Title"] {
  font-weight: var(--font-weight-heading, 700);
}

/* ── Internal luminescence — ambient glow field behind every page ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 600px at 12% -8%, rgba(45, 212, 191, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 105% 15%, rgba(124, 111, 238, 0.07), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 115%, rgba(45, 212, 191, 0.05), transparent 60%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 900px 600px at 12% -8%, rgba(45, 212, 191, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 105% 15%, rgba(85, 72, 200, 0.05), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 115%, rgba(45, 212, 191, 0.04), transparent 60%);
}

/* ── Frosted glass on every structural / card-like surface ── */
[class*="card"], [class*="Card"],
[class*="panel"], [class*="Panel"],
[class*="modal"], [class*="chip"], [class*="Chip"],
[class*="badge"]:not(.nav-badge), [class*="pill"],
.sidebar, .topbar, .navbar, .footer,
.auth-card, .nav-item, .path-option, .child-avatar-card,
.form-input, .child-pin-input, select, textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
  backdrop-filter: blur(var(--glass-blur, 20px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
}

/* ── Light-catching metallic edge on primary glass containers ──
   A 1px gradient ring drawn only inside the border, via mask-composite,
   so it reads as a thin light-catching bevel rather than a flat line. */
[class$="-card"], [class*="-card "], [class*="-card:"],
.auth-card, .modal-card, .weekly-goal-card, .chart-card,
.activity-card, .upnext-card, .lb-full-card, .challenge-card,
.milestones-card, .settings-card {
  position: relative;
  isolation: isolate;
}
[class$="-card"]::after, .auth-card::after, .modal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--glass-border-top, rgba(255,255,255,0.16)), transparent 45%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ── Sidebar / nav active-state luminous glow ── */
.nav-link.active, .sidebar-nav-item.active, .nav-item.active,
.topbar-nav a.active {
  box-shadow: var(--glow, 0 0 15px rgba(45, 212, 191, 0.2));
}

/* ── Primary CTA buttons — gradient fill + subtle scale on hover ── */
.btn-primary, .btn-trial, .btn-auth-primary, .btn-cta-white,
.btn-child-start, #runBtn, .run-btn, [id*="runBtn"] {
  transition: var(--transition, all 0.3s cubic-bezier(0.4,0,0.2,1)), box-shadow 0.3s ease;
}
.btn-primary:hover, .btn-trial:hover, .btn-auth-primary:hover,
.btn-cta-white:hover, .btn-child-start:hover, #runBtn:hover, .run-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

/* ── Recessed dark inputs / clean bordered light inputs ── */
.form-input, .child-pin-input, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .form-input,
[data-theme="light"] .child-pin-input,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  box-shadow: none;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}