:root {
  /* Backgrounds */
  --bg-base:        #000000;
  --bg-surface:     #0a0f18;
  --bg-elevated:    #111827;
  --bg-overlay:     rgba(0,0,0,0.7);
  --bg-hover:       #1a2236;

  /* Borders */
  --border-default: #2f3f57;
  --border-subtle:  #1a2536;
  --border-focus:   #57a8ff;

  /* Text */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-tertiary:  #64748b;
  --text-inverse:   #000000;

  /* Accent */
  --accent:         #57a8ff;
  --accent-hover:   #79bdff;
  --accent-subtle:  rgba(87,168,255,0.12);

  /* Semantic */
  --success:        #34d399;
  --success-subtle: rgba(52,211,153,0.12);
  --warning:        #fbbf24;
  --warning-subtle: rgba(251,191,36,0.12);
  --error:          #f87171;
  --error-subtle:   rgba(248,113,113,0.12);

  /* Energy */
  --energy-up:      #57a8ff;
  --energy-down:    #f87171;
  --energy-neutral: #64748b;

  /* Web3 badges */
  --badge-blockinity: #8b5cf6;
  --badge-provifier:  #10b981;
  --badge-gate:       #f59e0b;

  /* Typography */
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-lg:        1.125rem;
  --text-xl:        1.25rem;
  --text-2xl:       1.5rem;
  --text-3xl:       1.875rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.5);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.5);

  /* Layout */
  --sidebar-width: 260px;
  --content-max:   800px;
  --header-height: 56px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

::selection { color: var(--accent); background-color: var(--accent-subtle); }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background-color: var(--bg-base); }
::-webkit-scrollbar-thumb { background-color: var(--bg-elevated); border-radius: 5px; border: 1px solid var(--border-default); }
::-webkit-scrollbar-corner { background: transparent; }