/* DJ NANOBYTE — Nano Rave + RAGEFUTURE, one system
   Lunar warehouse: cerulean moon sky, cream type, one spark, gold CTA.
   Import first. No rogue hex in components. */

:root {
  /* C01–C12 */
  --nb-void: #0b0712;
  --nb-ink: #16101f;
  --nb-fog: #f4ebd0; /* moon cream — default display type */
  --nb-plasma: #ff2d95; /* night spark */
  --nb-byte: #c8ff3d; /* on / playing */
  --nb-laser: #3dfff0; /* focus / links */
  --nb-violet: #7a3dff;
  --nb-coral: #ff4b3e; /* human / photo */
  --nb-rage: #3a7bd5; /* moon atmosphere — always on, not a side brand */
  --nb-chrome: #c9d1d9;
  --nb-signal: #ffb020; /* the only primary CTA */
  --nb-live: #ff3b30;

  --nb-fog-dim: color-mix(in srgb, var(--nb-fog) 62%, var(--nb-void));
  --nb-line: color-mix(in srgb, var(--nb-rage) 35%, var(--nb-void));

  /* Sky: RAGEFUTURE cerulean pulled through Nano void */
  --nb-sky:
    radial-gradient(ellipse 80% 60% at 70% 10%, color-mix(in srgb, var(--nb-rage) 38%, transparent), transparent 55%),
    radial-gradient(circle at 18% 80%, color-mix(in srgb, var(--nb-violet) 22%, transparent), transparent 42%),
    radial-gradient(circle at 88% 70%, color-mix(in srgb, var(--nb-plasma) 12%, transparent), transparent 28%),
    var(--nb-void);

  --nb-moon: color-mix(in srgb, var(--nb-fog) 78%, var(--nb-rage));
  --nb-moon-edge: color-mix(in srgb, var(--nb-rage) 55%, var(--nb-fog));

  --nb-font-display: "Syne", "Oxanium", ui-sans-serif, system-ui, sans-serif;
  --nb-font-script: "Birthstone", "Pinyon Script", "Segoe Script", cursive;
  --nb-font-body: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
  --nb-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --nb-fs-12: 0.75rem;
  --nb-fs-14: 0.875rem;
  --nb-fs-16: 1rem;
  --nb-fs-20: 1.25rem;
  --nb-fs-28: 1.75rem;
  --nb-fs-40: 2.5rem;
  --nb-fs-64: clamp(2.5rem, 8vw, 4rem);

  --nb-space-1: 0.25rem;
  --nb-space-2: 0.5rem;
  --nb-space-3: 0.75rem;
  --nb-space-4: 1rem;
  --nb-space-6: 1.5rem;
  --nb-space-8: 2rem;
  --nb-space-12: 3rem;
  --nb-space-16: 4rem;

  --nb-radius-sm: 2px;
  --nb-radius: 4px;
  --nb-radius-pill: 999px;

  --nb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nb-ms: 200ms;

  --nb-cta: var(--nb-signal);
  --nb-spark: var(--nb-plasma);
  --nb-text: var(--nb-fog);
  --nb-text-dim: var(--nb-fog-dim);
}

/* Night = Nano Rave cards / hero / tonight. Same tokens, hotter spark. */
[data-intensity="night"] {
  --nb-spark: var(--nb-plasma);
  --nb-sky:
    radial-gradient(ellipse 80% 60% at 72% 8%, color-mix(in srgb, var(--nb-rage) 32%, transparent), transparent 52%),
    radial-gradient(circle at 12% 85%, color-mix(in srgb, var(--nb-violet) 26%, transparent), transparent 40%),
    radial-gradient(circle at 90% 64%, color-mix(in srgb, var(--nb-plasma) 20%, transparent), transparent 30%),
    var(--nb-void);
}

/* Moon = about / EPK / RAGEFUTURE archive. Same tokens, quieter spark. */
[data-intensity="moon"] {
  --nb-spark: var(--nb-rage);
  --nb-sky:
    radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, var(--nb-rage) 48%, transparent), transparent 60%),
    var(--nb-void);
}

/* Band card only */
[data-theme="black-wine"] {
  --nb-spark: var(--nb-coral);
  --nb-sky: var(--nb-ink);
}

html,
body {
  background: var(--nb-void);
  color: var(--nb-text);
  font-family: var(--nb-font-body);
  font-size: var(--nb-fs-16);
  line-height: 1.5;
}

body {
  background-image: var(--nb-sky);
  background-attachment: fixed;
}

.nb-display {
  font-family: var(--nb-font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--nb-fog);
  line-height: 0.95;
}

.nb-script {
  font-family: var(--nb-font-script);
  font-weight: 400;
  color: var(--nb-fog);
  line-height: 1;
}

.nb-label {
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-chrome);
}

.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nb-space-2);
  min-height: 2.75rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--nb-radius);
  border: 1px solid transparent;
  font-family: var(--nb-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--nb-ms) var(--nb-ease), color var(--nb-ms) var(--nb-ease),
    border-color var(--nb-ms) var(--nb-ease);
}

.nb-btn--primary {
  background: var(--nb-signal);
  color: #1a1204;
}

.nb-btn--primary:hover,
.nb-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--nb-signal) 80%, var(--nb-fog));
}

.nb-btn--ghost {
  background: transparent;
  color: var(--nb-fog);
  border-color: var(--nb-moon-edge);
}

.nb-btn--ghost:hover,
.nb-btn--ghost:focus-visible {
  border-color: var(--nb-fog);
}

.nb-btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--nb-laser);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}