:root {
  /* Surfaces */
  --bg:       #0f1117;
  --surface:  #181c27;
  --surface2: #1e2435;
  --surface3: #252d42;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.07);
  --border-focus: rgba(108, 142, 245, 0.6);

  /* Brand */
  --accent:       #6C8EF5;
  --accent-dim:   #3a4f9e;
  --accent-hover: #5a7de8;

  /* Status */
  --green:  #34d399;
  --red:    #f87171;
  --yellow: #fbbf24;

  /* Text */
  --text:       #e8eaf0;
  --text-muted: #7a82a0;
  --text-dim:   #4a5068;

  /* Shape */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Transitions */
  --transition: 0.15s ease;
}