:root {
  /* Backgrounds */
  --bg: #0a0f1a;
  --bg-2: #111827;
  --bg-3: #1a2236;
  --bg-4: #1f2a40;

  /* Text */
  --text: #e8eaf0;
  --text-2: #94a3b8;
  --text-3: #64748b;

  /* Brand */
  --accent: #05B3ED;
  --accent-dark: #0497CB;
  --accent-glow: rgba(5, 179, 237, 0.12);

  /* Semantic */
  --coral: #f97066;
  --amber: #fbbf24;
  --blue: #60a5fa;
  --green: #4ade80;

  /* Borders */
  --border: rgba(148, 163, 184, 0.12);
  --border-hover: rgba(5, 179, 237, 0.3);

  /* Radius */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-sm: 8px;

  /* Fonts */
  --font: 'DM Sans', -apple-system, sans-serif;
  --mono: 'Space Mono', monospace;

  /* Layout */
  --max-w: 1100px;
  --gutter: 40px;
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
  }
}