/* ═══════════════════════════════════════════════════════════════
   generative-ui.css — Generative UI Case Study theme
   Builds on luma.css + fitnex.css (layout, chapter dividers) and
   swaps the palette for the study's own: matte black · off-white.
   Load AFTER fitnex.css.
   ═══════════════════════════════════════════════════════════════ */

body.genui-body {
  --luma-bg: #0F0F0F;
  --luma-surface: #161616;
  --luma-surface-elevated: #1E1E1E;
  --luma-border: #2A2A2A;
  --luma-border-bright: #404040;
  --luma-blue: #E6E4DE;
  --luma-blue-glow: rgba(230, 228, 222, 0.25);
  --luma-cyan: #FFFFFF;
  --luma-cyan-glow: rgba(255, 255, 255, 0.18);
  --luma-muted: #A8A6A0;
  --luma-dim: #8A8880;
  --fitnex-control: #161616;

  background-image: radial-gradient(circle, #2A2A2A 1px, transparent 1px);
}

.genui-body .luma-progress-bar {
  background: linear-gradient(90deg, #8A8880, #E6E4DE, #FFFFFF);
  box-shadow: 0 0 10px rgba(230, 228, 222, 0.5);
}

.genui-body .luma-hero-title .text-gradient {
  background: linear-gradient(135deg, #FFFFFF 0%, #E6E4DE 50%, #8A8880 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Off-white accent needs ink text on its fills */
.genui-body .luma-cta-scroll,
.genui-body .luma-act-pill.active {
  color: #0F0F0F;
}

.genui-body .luma-cta-scroll:hover {
  background: #FFFFFF;
}

.genui-body .luma-act-frame:hover {
  border-color: rgba(230, 228, 222, 0.5);
}

.genui-body .luma-progress-container {
  background: rgba(22, 22, 22, 0.8);
}

.genui-body .luma-topnav.scrolled {
  background-color: rgba(15, 15, 15, 0.96);
  border-bottom-color: rgba(230, 228, 222, 0.3);
}

.genui-body .luma-act-pill:hover {
  background: rgba(230, 228, 222, 0.12);
}

.genui-body .luma-hero-prompt,
.genui-body .luma-act-badge .badge-tag {
  background: rgba(230, 228, 222, 0.1);
  border-color: rgba(230, 228, 222, 0.3);
}

.genui-body .luma-overview-strip {
  background: rgba(230, 228, 222, 0.05);
  border-color: rgba(230, 228, 222, 0.2);
}

.genui-body .luma-footer {
  background: #0A0A0A;
}