:root {
  --bg-root:       #000000;
  --bg-surface:    #0a0a0a;
  --bg-elevated:   #111111;
  --bg-overlay:    #161616;
  --bg-hover:      #1a1a1a;

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --border-focus:   rgba(255,255,255,0.50);

  --text-primary:   #ededed;
  --text-secondary: #888888;
  --text-tertiary:  #555555;

  --accent-blue:  #3291ff;
  --accent-green: #50e3c2;
  --accent-red:   #ff4444;
  --accent-amber: #f5a623;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', monospace;

  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --shadow-md:         0 4px 12px rgba(0,0,0,0.6);
  --shadow-glow-white: 0 0 20px rgba(255,255,255,0.06);
  --shadow-glow-blue:  0 0 20px rgba(50,145,255,0.15);

  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-base: 180ms;

  --nav-h: 56px;
}

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

body {
  background: var(--bg-root);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}