/* ═══════════════════════════════════════════════════════════
   base.css — Eighty7 Portal Design Tokens + Reset
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Colour palette */
  --bg-void:    #0a0a0f;
  --bg-surface: #0d0d14;
  --bg-border:  #1a1a2e;
  --bg-gap:     #111111;

  /* Accent */
  --green:      #00ff88;
  --green-dim:  #00ff8820;
  --green-glow: #00ff8840;
  --amber:      #ffaa00;
  --blue:       #00aaff;
  --red:        #ff4444;
  --orange:     #ff8800;

  /* Text */
  --text-primary:   #e0e0e0;
  --text-secondary: #555555;
  --text-muted:     #333333;

  /* Typography */
  --font-mono: 'Courier New', Courier, monospace;

  /* Spacing */
  --pad-xs: 4px;
  --pad-sm: 8px;
  --pad-md: 12px;
  --pad-lg: 24px;

  /* Borders */
  --border-dim:   1px solid var(--bg-border);
  --border-green: 1px solid var(--green);
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background:  var(--bg-void);
  color:       var(--text-primary);
  font-family: var(--font-mono);
  display:     flex;
  flex-direction: column;
}

/* ── Mobile: allow landing to scroll ── */
@media (max-width: 768px) {
  html, body {
    overflow: auto;
  }
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--bg-border); }

/* ── Shared fade-in animation ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* ── Shared button base ── */
.btn {
  background:  transparent;
  border:      var(--border-green);
  color:       var(--green);
  padding:     8px 16px;
  font-family: var(--font-mono);
  font-size:   0.7rem;
  cursor:      pointer;
  letter-spacing: 1px;
  transition:  all 0.2s;
}

.btn:hover {
  background:  var(--green-dim);
  box-shadow:  0 0 12px var(--green-glow);
}

.btn.close-btn {
  border-color: #333;
  color:        var(--text-secondary);
}

.btn.close-btn:hover {
  background: rgba(255,255,255,0.06);
  color:      #999;
}

.btn-row {
  display: flex;
  gap:     8px;
}