/* ══════════════════════════════════════════
   VISUAL STYLES — Midnight & Aurora
   Color variables + structural overrides
   ══════════════════════════════════════════ */

/* ┌─────────────────────────────────────────┐
   │  MIDNIGHT — Deep Indigo Depths           │
   └─────────────────────────────────────────┘ */

/* ── Midnight Light ── */
[data-style="midnight"] {
  --bg: #f8fafc;
  --sf: #f1f5f9;
  --cd: #ffffff;
  --cd2: #f1f5f9;
  --tx: #334155;
  --dim: #64748b;
  --tx2: #64748b;
  --wh: #0f172a;
  --acc: #64748b;
  --acc-hover: #94a3b8;
  --acc-subtle: rgba(100,116,139,0.12);
  --bdr: #e2e8f0;
  --bdr2: #cbd5e1;
  --grn: #334155;
  --red: #334155;
  --amb: #334155;
  --pur: #334155;
  --cyn: #334155;
  --card-bg: #ffffff;
  --focus-ring: 0 0 0 2px #64748b;
  --shadow: 0 4px 20px rgba(0,0,0,0.05);
  --track-bg: rgba(0,0,0,0.04);
  --subtle-bg: rgba(100,116,139,0.06);
  --subtle-border: #e2e8f0;
  --flat-divider: #e2e8f0;
  --flat-row-hover: rgba(100,116,139,0.04);
  --elev-1: 0 1px 3px rgba(0,0,0,0.04);
  --elev-2: 0 4px 12px rgba(0,0,0,0.06);
  --elev-3: 0 8px 24px rgba(0,0,0,0.10);
}

/* ── Midnight Dark ── */
[data-style="midnight"][data-theme="dark"] {
  --bg: #0f172a;
  --sf: #1e293b;
  --cd: #1e293b;
  --cd2: #334155;
  --tx: #cbd5e1;
  --dim: #94a3b8;
  --tx2: #94a3b8;
  --wh: #f8fafc;
  --acc: #B4C8DC;
  --acc-hover: #C8D8E8;
  --acc-subtle: rgba(180,200,220,0.15);
  --bdr: #334155;
  --bdr2: #475569;
  --grn: #E8EDF2;
  --red: #E8EDF2;
  --amb: #E8EDF2;
  --pur: #E8EDF2;
  --cyn: #E8EDF2;
  --card-bg: #1e293b;
  --focus-ring: 0 0 0 2px #B4C8DC;
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --track-bg: rgba(255,255,255,0.06);
  --subtle-bg: rgba(180,200,220,0.10);
  --subtle-border: #334155;
  --overlay-bg: rgba(15,23,42,0.88);
  --flat-divider: rgba(255,255,255,0.06);
  --flat-row-hover: rgba(180,200,220,0.06);
  --elev-1: 0 1px 3px rgba(0,0,0,0.25);
  --elev-2: 0 4px 12px rgba(0,0,0,0.35);
  --elev-3: 0 8px 24px rgba(0,0,0,0.45);
}

/* ── Midnight Onyx ── */
[data-style="midnight"][data-theme="onyx"] {
  --bg: #020617;
  --sf: #0f172a;
  --cd: #0f172a;
  --cd2: #1e293b;
  --tx: #e2e8f0;
  --dim: #94a3b8;
  --tx2: #94a3b8;
  --wh: #f8fafc;
  --acc: #B4C8DC;
  --acc-hover: #C8D8E8;
  --acc-subtle: rgba(180,200,220,0.15);
  --bdr: #1e293b;
  --bdr2: #334155;
  --card-bg: #0f172a;
  --focus-ring: 0 0 0 2px #B4C8DC;
  --shadow: 0 4px 20px rgba(0,0,0,0.5);
  --overlay-bg: rgba(2,6,23,0.92);
  --flat-divider: rgba(255,255,255,0.05);
}

/* ── Midnight: Structural Overrides ── */

/* Card hover lift */
[data-style="midnight"] .glass-card:hover,
[data-style="midnight"] .stg-card:hover,
[data-style="midnight"] .dash-domain-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}

/* Hero card — accent border + radial glow orb */
[data-style="midnight"] .dash-hero,
[data-style="midnight"] .home-hero {
  border-color: rgba(99,102,241,0.3);
  overflow: hidden;
  position: relative;
}
[data-style="midnight"] .dash-hero::after,
[data-style="midnight"] .home-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(99,102,241,0.15), transparent);
  border-radius: 50%;
  pointer-events: none;
}

/* Progress bar — gradient fill */
[data-style="midnight"] .dash-hero-bar-fill,
[data-style="midnight"] .home-hero-bar-fill {
  background: linear-gradient(90deg, var(--grn), var(--acc)) !important;
}

/* Chip active glow */
[data-style="midnight"] .chip.on {
  box-shadow: 0 0 16px rgba(180,200,220,0.2);
}

/* Tab bar active — tinted pill */
[data-style="midnight"] .tab-bar-item.active {
  background: rgba(99,102,241,0.10);
  border-radius: 12px;
}
[data-style="midnight"] .tab-bar-item.active svg {
  transform: translateY(-1px);
}

/* Nav bar glass */
[data-style="midnight"] .tab-bar {
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top-color: var(--bdr);
}
[data-style="midnight"][data-theme="light"] .tab-bar {
  background: rgba(248,250,252,0.90);
}

/* Button glow accents */
[data-style="midnight"] .btn-pri {
  box-shadow: 0 0 16px rgba(180,200,220,0.2);
}
[data-style="midnight"] .btn-grn {
  box-shadow: 0 0 12px rgba(180,200,220,0.15);
}


/* ┌─────────────────────────────────────────┐
   │  AURORA — Frosted Glass                  │
   └─────────────────────────────────────────┘ */

/* ── Aurora Light ── */
[data-style="aurora"] {
  --glass-blur: blur(24px);
  --inner-glow: inset 0 1px 1px rgba(255,255,255,0.8);
  --accent-glow: 0 0 20px rgba(180,200,220,0.15);
  --cd: rgba(245,245,247,0.72);
  --sf: rgba(245,245,247,0.65);
  --card-bg: rgba(245,245,247,0.72);
  --bdr: rgba(0,0,0,0.08);
  --bdr2: rgba(0,0,0,0.12);
  --shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.8);
  --elev-1: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.6);
  --elev-2: 0 8px 32px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.8);
  --elev-3: 0 12px 48px rgba(0,0,0,0.10), inset 0 1px 1px rgba(255,255,255,0.8);
  --subtle-bg: rgba(0,0,0,0.03);
  --flat-divider: rgba(0,0,0,0.05);
  --r: 20px;
}

/* ── Aurora Dark ── */
[data-style="aurora"][data-theme="dark"] {
  --glass-blur: blur(24px);
  --inner-glow: inset 0 1px 1px rgba(255,255,255,0.06);
  --accent-glow: 0 0 20px rgba(180,200,220,0.3);
  --bg: #000000;
  --cd: rgba(28,28,30,0.65);
  --sf: rgba(28,28,30,0.55);
  --card-bg: rgba(28,28,30,0.65);
  --bdr: rgba(255,255,255,0.08);
  --bdr2: rgba(255,255,255,0.15);
  --shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06);
  --elev-1: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.04);
  --elev-2: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06);
  --elev-3: 0 12px 48px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.06);
  --subtle-bg: rgba(255,255,255,0.04);
  --overlay-bg: rgba(0,0,0,0.85);
  --flat-divider: rgba(255,255,255,0.05);
  --r: 20px;
}

/* ── Aurora Onyx ── */
[data-style="aurora"][data-theme="onyx"] {
  --glass-blur: blur(28px);
  --inner-glow: inset 0 1px 1px rgba(255,255,255,0.04);
  --bg: #000000;
  --cd: rgba(18,18,20,0.70);
  --sf: rgba(18,18,20,0.60);
  --card-bg: rgba(18,18,20,0.70);
  --bdr: rgba(255,255,255,0.06);
  --bdr2: rgba(255,255,255,0.10);
  --shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.04);
  --overlay-bg: rgba(0,0,0,0.92);
  --flat-divider: rgba(255,255,255,0.04);
  --r: 20px;
}

/* ── Aurora: Glassmorphism card rules ── */
[data-style="aurora"] .card,
[data-style="aurora"] .glass-card,
[data-style="aurora"] .glass-card-elevated,
[data-style="aurora"] .glass-card-hero,
[data-style="aurora"] .stg-card,
[data-style="aurora"] .quiz-card,
[data-style="aurora"] .fc-card,
[data-style="aurora"] .exam-card,
[data-style="aurora"] .hub-card,
[data-style="aurora"] .home-card,
[data-style="aurora"] .study-card,
[data-style="aurora"] .dash-hero,
[data-style="aurora"] .home-hero,
[data-style="aurora"] .dash-domain-card {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Nav bar — heavy frost */
[data-style="aurora"] .tab-bar {
  background: var(--card-bg);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border-top-color: var(--bdr);
}

/* Modal overlays — frosted */
[data-style="aurora"] .modal-overlay,
[data-style="aurora"] .cp-overlay {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Aurora: Entrance Animation ── */
@keyframes glassFade {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-style="aurora"] .view.active {
  animation: glassFade 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Aurora: Hero card — accent border + radial orb ── */
[data-style="aurora"] .dash-hero,
[data-style="aurora"] .home-hero {
  border-color: rgba(10,132,255,0.2);
  overflow: hidden;
  position: relative;
}
[data-style="aurora"] .dash-hero::after,
[data-style="aurora"] .home-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(10,132,255,0.2), transparent);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Aurora: Progress bar gradient + glow ── */
[data-style="aurora"] .dash-hero-bar-fill,
[data-style="aurora"] .home-hero-bar-fill {
  background: linear-gradient(90deg, var(--grn), var(--acc)) !important;
  box-shadow: 0 0 12px rgba(10,132,255,0.3);
}
[data-style="aurora"] .assess-progress-fill {
  box-shadow: 0 0 10px rgba(10,132,255,0.25);
}

/* ── Aurora: Domain bar fill glow ── */
[data-style="aurora"] .dash-domain-bar-fill {
  box-shadow: 0 0 8px currentColor;
  opacity: 0.9;
}

/* ── Aurora: Chip — glass-backed with glow ── */
[data-style="aurora"] .chip {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
[data-style="aurora"] .chip.on {
  background: rgba(180,200,220,0.15);
  box-shadow: 0 0 16px rgba(180,200,220,0.25);
}

/* ── Aurora: Tab bar active icon — lift + glow ── */
[data-style="aurora"] .tab-bar-item.active svg {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 4px 6px rgba(10,132,255,0.35));
}

/* ── Aurora: Flashcard — deep shadow + larger radius ── */
[data-style="aurora"] .as-fc-front,
[data-style="aurora"] .as-fc-back {
  border-radius: 24px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
[data-style="aurora"] .as-fc-card {
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
[data-style="aurora"] .as-fc-card.as-fc-flipped {
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* ── Aurora: Button glows ── */
[data-style="aurora"] .btn-pri {
  box-shadow: 0 0 20px rgba(10,132,255,0.3);
}
[data-style="aurora"] .btn-grn {
  box-shadow: 0 0 15px rgba(48,209,88,0.25);
}
[data-style="aurora"] .btn-rev {
  box-shadow: 0 0 15px rgba(255,159,10,0.25);
}
[data-style="aurora"] .btn-red {
  box-shadow: 0 0 15px rgba(255,69,58,0.25);
}

/* ── Aurora: Card hover lift ── */
[data-style="aurora"] .glass-card:hover,
[data-style="aurora"] .stg-card:hover,
[data-style="aurora"] .dash-domain-card:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-2px);
}

/* ── Aurora: Springier easing + deeper press ── */
[data-style="aurora"] button {
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
[data-style="aurora"] button:active {
  transform: scale(0.95);
}

/* ── Aurora: Settings cards get glass ── */
[data-style="aurora"] .stg-style-card {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}