:root {
  /* Primitives */
  --color-blue-50:  #eff6ff;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-500: #6b7280;
  --color-gray-900: #111827;

  /* Semantic */
  --color-primary:          var(--color-blue-600);
  --color-primary-hover:    var(--color-blue-700);
  --color-text-heading:     var(--color-gray-900);
  --color-text-body:        var(--color-gray-500);
  --color-bg:               #ffffff;
  --color-surface:          var(--color-gray-50);
  --color-border:           var(--color-gray-100);

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Typography */
  --font-sans:  "Inter", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", "Fira Code", monospace;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;

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