/* ╔══════════════════════════════════════════════════════════════════╗
   ║ Onyx·Realms · Theme Tokens                                       ║
   ║ Single source of truth for gradients, radii, and typography      ║
   ║ used across the hub and per-game shells.                         ║
   ║ ADDITIVE — does not override onyx-wallet.js or onyx-header.js.   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  /* ── Brand palette ──────────────────────────────────────────────── */
  --onyx-purple:        #7c3aed;
  --onyx-purple-l:      #a78bfa;
  --onyx-purple-d:      #4a1a8a;
  --onyx-violet-deep:   #1f0b3a;
  --onyx-near-black:    #08040f;
  --onyx-cyan:          #22d3ee;
  --onyx-teal:          #2dd4bf;
  --onyx-gold:          #f59e0b;
  --onyx-gold-l:        #fbbf24;

  /* ── Gradients ──────────────────────────────────────────────────── */
  /* Primary: hero panels, primary buttons, tile hover states. */
  --onyx-grad-primary:
    linear-gradient(135deg,
      var(--onyx-purple)      0%,
      var(--onyx-purple-d)   55%,
      var(--onyx-near-black) 100%);

  /* Accent: active states, mining indicators, "earn ONYX" pills. */
  --onyx-grad-accent:
    linear-gradient(135deg,
      var(--onyx-purple) 0%,
      var(--onyx-cyan)  100%);

  /* Tile / card surface: subtle radial wash on top of dark base. */
  --onyx-grad-tile:
    radial-gradient(circle at 30% 0%,
      rgba(124,58,237,0.18) 0%,
      transparent          55%),
    linear-gradient(180deg,
      rgba(31,11,58,0.85)  0%,
      rgba(8,4,15,0.92)  100%);

  /* Splash / hero wash: ambient backdrop for splash modals + hero. */
  --onyx-grad-splash:
    radial-gradient(ellipse at 50% -10%,
      rgba(124,58,237,0.15) 0%,
      transparent          55%),
    radial-gradient(ellipse at 80% 110%,
      rgba(34,211,238,0.10) 0%,
      transparent          55%),
    linear-gradient(180deg,
      var(--onyx-violet-deep) 0%,
      var(--onyx-near-black) 100%);

  /* Pill: gold→purple sheen for "EARN ONYX" tags. */
  --onyx-grad-pill:
    linear-gradient(90deg,
      var(--onyx-gold-l)   0%,
      var(--onyx-purple-l) 100%);

  /* ── Radii ──────────────────────────────────────────────────────── */
  --radius-sm:   8px;    /* tags, inline chips */
  --radius-md:  14px;    /* buttons (standard) */
  --radius-lg:  20px;    /* cards, tiles */
  --radius-xl:  24px;    /* modals, sheets (top corners) */
  --radius-pill: 999px;  /* pill buttons */

  /* ── Typography weights ─────────────────────────────────────────── */
  --fw-body:    400;
  --fw-medium:  500;
  --fw-section: 600;     /* section headers */
  --fw-tile:    700;     /* tile titles, EARN ONYX pills */
  --fw-hero:    800;     /* hero headlines */

  /* ── Tracking ───────────────────────────────────────────────────── */
  --tr-hero:    0.04em;
  --tr-pill:    0.18em;
  --tr-body:    0.01em;

  /* ── Shadows ────────────────────────────────────────────────────── */
  --onyx-glow-soft:
    0 8px 32px rgba(124,58,237,0.18),
    0 2px 8px rgba(0,0,0,0.45);
  --onyx-glow-strong:
    0 12px 40px rgba(124,58,237,0.20),
    0 4px 12px rgba(0,0,0,0.55);
}

/* ── Opt-in utility classes ──────────────────────────────────────────
   Pages can adopt the new system by adding these classes; existing
   styles are not overridden. */

.onyx-hero       { background: var(--onyx-grad-splash); }
.onyx-tile       { background: var(--onyx-grad-tile); border-radius: var(--radius-lg); }
.onyx-tile:hover { background: var(--onyx-grad-primary); box-shadow: var(--onyx-glow-strong); }

.onyx-btn-primary {
  background: var(--onyx-grad-primary);
  color: #fff;
  border: 1px solid rgba(167,139,250,0.55);
  border-radius: var(--radius-md);
  font-weight: var(--fw-tile);
  letter-spacing: var(--tr-pill);
  text-transform: uppercase;
}
.onyx-btn-primary:hover { filter: brightness(1.12); box-shadow: var(--onyx-glow-soft); }

.onyx-btn-pill {
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-weight: var(--fw-tile);
  letter-spacing: var(--tr-pill);
}

.onyx-earn-pill {
  display: inline-block;
  background: var(--onyx-grad-pill);
  color: #08040f;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-weight: var(--fw-tile);   /* 700 — WCAG-AA on gold/purple wash */
  font-size: 0.72rem;
  letter-spacing: var(--tr-pill);
  text-transform: uppercase;
}

.onyx-card-modal {
  background: var(--onyx-grad-splash);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
  border: 1px solid rgba(124,58,237,0.32);
  box-shadow: var(--onyx-glow-strong);
}

/* Hero / section headline hygiene */
.onyx-h-hero    { font-weight: var(--fw-hero);    letter-spacing: var(--tr-hero); }
.onyx-h-section { font-weight: var(--fw-section); letter-spacing: var(--tr-hero); }
.onyx-h-tile    { font-weight: var(--fw-tile); }

/* Mining / active state shimmer */
@keyframes onyx-mine-pulse {
  0%, 100% { box-shadow: 0 0 0   rgba(34,211,238,0.0); }
  50%      { box-shadow: 0 0 14px rgba(34,211,238,0.55); }
}
.onyx-mining-active {
  background: var(--onyx-grad-accent);
  animation: onyx-mine-pulse 1.8s ease-in-out infinite;
}