/* ════════════════════════════════════════════════════════════════════
   AURORA — UI2 DARK SKIN OVERRIDE
   Re-themes any UI2 page (body.ui2) to the Aurora dark skin by redefining
   the --ui2-* tokens + a few component overrides + an animated ambient
   background. Load AFTER the ui2-*.css stylesheets. No markup changes.
   Intended for PUBLIC UI2 pages (blog, tool landings, legal, etc.).
   ════════════════════════════════════════════════════════════════════ */

body.ui2 {
  /* Neutrals → dark aurora */
  --ui2-cream:   #0A0A1E;
  --ui2-paper:   #130F2E;
  --ui2-paper-2: #0E0B2A;
  --ui2-ink:     #F3EFFF;
  --ui2-ink-2:   #E2DCF5;
  --ui2-ink-3:   rgba(243,239,255,0.70);
  --ui2-ink-4:   rgba(243,239,255,0.55);
  --ui2-ink-5:   rgba(243,239,255,0.42);
  --ui2-rule:    rgba(255,255,255,0.12);

  /* Accent ramp → violet */
  --ui2-amber-50:  rgba(168,85,247,0.10);
  --ui2-amber-100: rgba(168,85,247,0.18);
  --ui2-amber-200: rgba(168,85,247,0.26);
  --ui2-amber-300: rgba(168,85,247,0.40);
  --ui2-amber-400: #C9A8FF;
  --ui2-amber-500: #A855F7;
  --ui2-amber-600: #C9A8FF;
  --ui2-amber-700: #D9C6FF;
  --ui2-amber-800: #E7DBFF;

  --ui2-good: #4ADE80;
  --ui2-warn: #FBBF24;
  --ui2-bad:  #FB7185;

  --ui2-shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 8px 24px rgba(6,4,20,0.50);
  --ui2-shadow-md: 0 1px 2px rgba(0,0,0,0.40), 0 18px 44px rgba(6,4,20,0.60);
  --ui2-shadow-lg: 0 4px 8px rgba(0,0,0,0.40), 0 30px 80px rgba(6,4,20,0.70);

  background: #0A0A1E !important;
  color: #F3EFFF !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

/* Editorial + tool inline pages drive themselves with BARE vars
   (--ink/--ink-soft/--paper/--bg/--fg/--accent, from editorial-redesign.css +
   per-page inline :root), not --ui2-*. Redefine the full set so they re-theme
   cleanly. Harmless to pure --ui2-* pages. */
body.ui2 {
  --paper:#0A0A1E !important; --paper-soft:#130F2E !important; --paper-deep:#0E0B2A !important;
  --cream:#130F2E !important; --surface:#130F2E !important; --surface-2:#0E0B2A !important;
  --ink:#F3EFFF !important; --ink-soft:rgba(243,239,255,0.74) !important; --ink-mute:rgba(243,239,255,0.55) !important;
  --ink-faint:rgba(243,239,255,0.16) !important; --ink-ghost:rgba(243,239,255,0.07) !important;
  --accent:#C9A8FF !important; --accent-strong:#A855F7 !important; --accent-soft:rgba(168,85,247,0.16) !important; --accent-cool:#C9A8FF !important; --accent2:#EC4899 !important;
  --bg:#0A0A1E !important; --bg2:rgba(255,255,255,0.05) !important; --bg3:rgba(255,255,255,0.05) !important; --panel:rgba(255,255,255,0.05) !important;
  --fg:#F3EFFF !important; --fg2:rgba(243,239,255,0.72) !important; --fg3:rgba(243,239,255,0.5) !important;
  --rule:rgba(255,255,255,0.12) !important; --line:rgba(255,255,255,0.12) !important; --warning:#FBBF24 !important; --danger:#FB7185 !important;
}
/* Tool-page fixed nav + structural cards hardcode light surfaces */
body.ui2 nav { background: rgba(10,10,30,0.72) !important; border-bottom-color: rgba(255,255,255,0.10) !important; }
body.ui2 .form-section, body.ui2 .output-section, body.ui2 .hours-grid, body.ui2 .tool-card { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; }
body.ui2 .code-block { background: rgba(0,0,0,0.28) !important; border-color: rgba(255,255,255,0.12) !important; }
body.ui2 input, body.ui2 select, body.ui2 textarea { background: rgba(255,255,255,0.06) !important; color:#F3EFFF !important; border-color: rgba(255,255,255,0.18) !important; }
body.ui2 select option { background:#130F2E !important; color:#F3EFFF !important; }

/* Ambient drifting aurora (replaces the paper grain) */
body.ui2::before {
  background: conic-gradient(from 0deg at 38% 42%, #6366F1, #A855F7, #EC4899, #3DA9FF, #8B7CFF, #6366F1) !important;
  filter: blur(80px) saturate(1.2) !important;
  opacity: 0.14 !important;
  z-index: -1 !important;
  animation: auUi2Swirl 44s linear infinite;
}
@keyframes auUi2Swirl { to { transform: rotate(360deg); } }

/* Primary CTA → brand gradient */
body.ui2 .btn-primary,
body.ui2 .ui2-btn--primary,
body.ui2 .ui2-btn-primary {
  background: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 30px -8px rgba(168,85,247,0.5) !important;
}
body.ui2 .btn-secondary,
body.ui2 .btn-ghost,
body.ui2 .ui2-btn--ghost {
  background: rgba(255,255,255,0.05) !important;
  color: #F3EFFF !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Surfaces that hardcode white/cream → glass */
body.ui2 [class*="card"],
body.ui2 .ui2-card,
body.ui2 .panel,
body.ui2 article,
body.ui2 aside {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Links / accents */
body.ui2 a { color: var(--ui2-amber-600); }
body.ui2 ::selection { background: rgba(168,85,247,0.30); color: #fff; }

/* ── Editorial article body (blog) — has its own heavy CSS not driven by vars ── */
body.ui2 article,
body.ui2 .post-body,
body.ui2 .post-hero,
body.ui2 .post-head,
body.ui2 [class*="editorial"] {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
body.ui2 .post-body,
body.ui2 .post-body h1, body.ui2 .post-body h2, body.ui2 .post-body h3,
body.ui2 .post-body h4, body.ui2 .post-body h5, body.ui2 .post-body h6,
body.ui2 .post-body strong, body.ui2 .post-body em, body.ui2 .post-body td,
body.ui2 .post-body th, body.ui2 .post-body figcaption, body.ui2 .post-body blockquote,
body.ui2 .post-head h1, body.ui2 .post-head h2, body.ui2 .post-hero h1 {
  color: #F3EFFF !important;
}
body.ui2 .post-body p, body.ui2 .post-body li, body.ui2 .post-body dd {
  color: rgba(243,239,255,0.82) !important;
}
body.ui2 .post-body blockquote {
  background: rgba(168,85,247,0.08) !important;
  border-left: 3px solid #A855F7 !important;
}
body.ui2 .post-body pre, body.ui2 .post-body code {
  background: rgba(255,255,255,0.06) !important;
  color: #E0CCFF !important;
}
body.ui2 .post-body hr { border-color: rgba(255,255,255,0.12) !important; }

/* ── ui2-quality.css applies a LIGHT glass-highlight gradient
   (linear-gradient(145deg, white…)) to many card/surface classes —
   .post-header, .post-body, .post-item, .plan, .panel, .faq-item,
   .final-cta, .report-shell, etc. On the dark skin that washes the
   surface light and hides the (now-light) text. Retune the quality
   vars to dark AND replace the gradient with dark glass. The gradient
   has hardcoded white stops, so the var retune alone isn't enough —
   we must override `background` on the same selector list. ── */
body.ui2 {
  --ui2-quality-glass: rgba(255,255,255,0.05);
  --ui2-quality-glass-strong: rgba(255,255,255,0.08);
  --ui2-quality-line: rgba(255,255,255,0.10);
  --ui2-quality-line-strong: rgba(255,255,255,0.14);
  --ui2-quality-highlight: rgba(255,255,255,0.06);
  --ui2-quality-shadow: 0 18px 44px rgba(6,4,20,0.5);
  --ui2-quality-shadow-strong: 0 30px 80px rgba(6,4,20,0.6);
}
body.ui2 .hero-card, body.ui2 .hero, body.ui2 .status-card, body.ui2 .metric, body.ui2 .section,
body.ui2 .workspace-link-card, body.ui2 .pipe-stat, body.ui2 .pipe-col, body.ui2 .gi-hero,
body.ui2 .gi-explain, body.ui2 .gi-board, body.ui2 .table-panel, body.ui2 .tile, body.ui2 .list,
body.ui2 .detail, body.ui2 .card, body.ui2 .step-card, body.ui2 .step-pane, body.ui2 .report-cta-row,
body.ui2 .attribution-card, body.ui2 .flare-card, body.ui2 .vertical-card, body.ui2 .tool-card,
body.ui2 .founder-card, body.ui2 .operator-card, body.ui2 .pricing-box, body.ui2 .plan,
body.ui2 .compare, body.ui2 .faq-item, body.ui2 details.ui2-faq, body.ui2 .final-cta,
body.ui2 .panel, body.ui2 .settings-card, body.ui2 .admin-card, body.ui2 .post-item,
body.ui2 .post-header, body.ui2 .post-body, body.ui2 .report-shell, body.ui2 .email-preview,
body.ui2 .checker-card {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
/* editorial cover/hero (privacy, terms, blog) → rounded + aligned to other cards */
body.ui2.site-editorial .hero, body.ui2.site-editorial .post-header { border-radius: 20px !important; }
/* extra editorial surfaces not in the ui2-quality list: in-article callouts +
   the post-footer CTA hardcode a warm-white bg → glass-dark. */
body.ui2 .callout, body.ui2 .post-footer, body.ui2 footer.post-footer, body.ui2 .post-cta, body.ui2 .note-box {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
/* the ::before gloss overlays these surfaces add → keep them faint on dark */
body.ui2 .post-item::before, body.ui2 .plan::before, body.ui2 .tool-card::before,
body.ui2 .flare-card::before, body.ui2 .vertical-card::before, body.ui2 .hero-card::before,
body.ui2 .status-card::before, body.ui2 .metric::before, body.ui2 .workspace-link-card::before {
  opacity: 0.4 !important;
}