/* ═══════════════════════════════════════════════════════════
   DEXTrack Pro — Design Tokens
   Single source of truth for colors, spacing, typography
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg-main:     #070b12;
  --bg-panel:    #0d1420;
  --bg-card:     #111a28;
  --bg-elevated: #161f30;
  --bg-hover:    rgba(255, 255, 255, 0.03);

  /* ── Text ── */
  --text-main:  #e5edf7;
  --text-muted: #8b98aa;
  --text-dim:   #5d6578;

  /* ── Borders ── */
  --border-soft:   rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.1);

  /* ── Solana (40% — primary) ── */
  --purple:       #7c3aed;
  --violet:       #a855f7;
  --green:        #22c55e;
  --solana-glow:  rgba(124, 58, 237, 0.15);

  /* ── Ethereum (20%) ── */
  --eth-blue: #627eea;
  --eth-gray: #9ca3af;

  /* ── Base (20%) ── */
  --base-blue: #0052ff;
  --base-cyan: #38bdf8;

  /* ── BNB (10%) ── */
  --gold:   #f3ba2f;
  --orange: #f59e0b;

  /* ── Status ── */
  --success:    #16c784;
  --success-bg: rgba(22, 199, 132, 0.1);
  --danger:     #ef4444;
  --danger-bg:  rgba(239, 68, 68, 0.1);
  --warning:    #fbbf24;

  /* ── Layout ── */
  --sidebar-width:     240px;
  --right-panel-width: 320px;
  --topbar-height:     56px;

  /* ── Radii ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ── Shadows ── */
  --shadow-card:     0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* ── Fonts ── */
  --font-main: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* Chain accent colors (also used as data-chain attribute selectors) */
[data-chain="solana"]   { --chain-color: var(--purple); }
[data-chain="ethereum"] { --chain-color: var(--eth-blue); }
[data-chain="base"]     { --chain-color: var(--base-blue); }
[data-chain="bsc"]      { --chain-color: var(--gold); }
[data-chain="arbitrum"] { --chain-color: #28a0f0; }
[data-chain="polygon"]  { --chain-color: #8247e5; }
[data-chain="ton"]      { --chain-color: #0098ea; }
[data-chain="sui"]      { --chain-color: #6fbcf0; }