/*
 * Hub Figma Design System (WIP)
 *
 * Purpose:
 * - Provide a reusable token foundation for immersive/gaming surfaces in GeniusHub.
 * - Keep legacy Hub styles intact by default; activate overrides only via `.hub-figma`.
 *
 * Source:
 * - Figma: Genius-lab (JJH1dygByFVWcAL5vzK7x1), immersive dark + neon-lime direction (approx).
 */

:root {
  /* Core palette */
  --hub-figma-ink: #0a0a0b;
  --hub-figma-surface: #141414;
  --hub-figma-surface-2: #1b1b1b;
  --hub-figma-border: rgba(255, 255, 255, 0.10);

  /* Neon accent (lime) */
  --hub-figma-accent: #90c03c;
  --hub-figma-accent-2: #b4d878;

  /* Text */
  --hub-figma-text: #f5f5f5;
  --hub-figma-text-secondary: rgba(245, 245, 245, 0.72);
  --hub-figma-text-muted: rgba(245, 245, 245, 0.55);

  /* Elevation */
  --hub-figma-radius-card: 12px;
  --hub-figma-shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.45);
  --hub-figma-shadow-glow: 0 0 0 1px rgba(144, 192, 60, 0.18), 0 18px 60px rgba(0, 0, 0, 0.55);

  /* Gradients */
  --hub-figma-hero-gradient:
    radial-gradient(900px circle at 16% 0%, rgba(144, 192, 60, 0.16), transparent 58%),
    radial-gradient(800px circle at 84% 18%, rgba(180, 216, 120, 0.10), transparent 56%);
  --hub-figma-card-gradient: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));

  /* Glass */
  --hub-figma-glass-bg: rgba(10, 10, 11, 0.70);
  --hub-figma-glass-border: rgba(255, 255, 255, 0.12);
  --hub-figma-glass-blur: blur(10px);
}

/* Activation class (page-level adoption) */
.hub-figma {
  color: var(--hub-figma-text);
  background: var(--hub-figma-ink);
}

/* Utility primitives (small, reusable) */
.hub-shell {
  min-height: 100vh;
  background: var(--hub-figma-ink);
  color: var(--hub-figma-text);
}

.hub-shell__hero {
  position: relative;
}

.hub-shell__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--hub-figma-hero-gradient);
  opacity: 1;
}

.hub-card {
  border-radius: var(--hub-figma-radius-card);
  border: 1px solid var(--hub-figma-border);
  background-image: var(--hub-figma-card-gradient);
  box-shadow: var(--hub-figma-shadow-soft);
}

.hub-glass {
  background: var(--hub-figma-glass-bg);
  border: 1px solid var(--hub-figma-glass-border);
  backdrop-filter: var(--hub-figma-glass-blur);
}

.hub-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--hub-figma-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--hub-figma-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0a0a0b;
  background: var(--hub-figma-accent);
  border: 1px solid rgba(144, 192, 60, 0.55);
  box-shadow: var(--hub-figma-shadow-glow);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.hub-action:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* GeniusQuest PoC overrides (scoped, minimal) */
.hub-figma .gq-main,
.hub-figma html,
.hub-figma body {
  background: var(--hub-figma-ink);
}

.hub-figma .gq-main::before {
  background: var(--hub-figma-hero-gradient);
  animation: none;
}

.hub-figma .hero-badge {
  background: rgba(144, 192, 60, 0.10);
  border-color: rgba(144, 192, 60, 0.28);
  color: var(--hub-figma-accent);
}

.hub-figma .hero-title .title-line.highlight {
  background: linear-gradient(135deg, var(--hub-figma-accent), #ffffff, var(--hub-figma-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hub-figma .play-button {
  background: var(--hub-figma-accent);
  color: #0a0a0b;
  box-shadow: var(--hub-figma-shadow-glow);
}

.hub-figma .stat-number {
  color: var(--hub-figma-accent);
  text-shadow: 0 2px 14px rgba(144, 192, 60, 0.22);
}

.hub-figma .feature-card,
.hub-figma .cta-content,
.hub-figma .gq-frame-box {
  border-radius: var(--hub-figma-radius-card);
}