/* ═══════════════════════════════════════════════════
   BEP-677 Explorer — Design Tokens
   Trading-terminal / Binance system
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Palette (locked) ── */
  --bg:        #0B0E11;
  --surface:   #1A1D22;
  --text:      #FFFFFF;
  --primary:   #F0B90B;
  --secondary: #00D4AA;
  --accent:    #00D4FF;
  --muted:     #9CA3AF;
  --warning:   #FBBF24;
  --surface-hover: #22262C;
  --border:    #2A2E35;

  /* ── Typography ── */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ── Spacing scale (4px base) ── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ── Radius ── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;

  /* ── Layout ── */
  --max-w: 1400px;
  --nav-h: 56px;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Tabular numerics everywhere ── */
body { font-variant-numeric: tabular-nums; }

/* ── Monospace for BEP-677 terms ── */
.mono, code, .term {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.01em;
}

/* ── Selection ── */
::selection {
  background: rgba(240, 185, 11, 0.3);
  color: var(--text);
}

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Link reset ── */
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) ease; }
a:hover { color: var(--primary); }

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}