/* DexNeXuS Hub — variables & base */

:root {
  color-scheme: dark;

  --hub-bg: #06060a;
  --hub-bg-2: #0c0c12;
  --hub-surface: rgba(255, 255, 255, 0.06);
  --hub-surface-2: rgba(255, 255, 255, 0.1);
  --hub-border: rgba(255, 255, 255, 0.12);
  --hub-text: #f2f4ff;
  --hub-text-2: rgba(242, 244, 255, 0.75);
  --hub-text-3: rgba(242, 244, 255, 0.5);

  --hub-accent: #8b5cf6;
  --hub-accent-2: #a78bfa;
  --hub-accent-glow: rgba(139, 92, 246, 0.4);
  --hub-blue: #60a5fa;

  --hub-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  --hub-radius: 16px;
  --hub-radius-sm: 12px;
  --hub-max: 1100px;

  --hub-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --hub-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--hub-font);
  background: var(--hub-bg);
  color: var(--hub-text);
}

a {
  color: inherit;
}

.hub-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hub-skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 14px;
  border-radius: var(--hub-radius-sm);
  border: 1px solid var(--hub-border);
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-150%);
  transition: transform 120ms ease-out;
  z-index: 9999;
}

.hub-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--hub-accent);
  outline-offset: 2px;
}

.hub-container {
  max-width: var(--hub-max);
  margin: 0 auto;
  padding: 0 20px;
}

.hub-muted {
  color: var(--hub-text-3);
  font-size: 0.95rem;
}

.hub-muted code {
  background: var(--hub-surface);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}