:root {
  /* Brand Blue */
  --color-blue-50:  #EFF8FD;
  --color-blue-100: #D9F0FA;
  --color-blue-200: #B3E1F5;
  --color-blue-300: #7CCBEE;
  --color-blue-400: #36A9E1;
  --color-blue-500: #1A8EC4;
  --color-blue-600: #1372A0;
  --color-blue-700: #0F5A80;
  --color-blue-800: #0B4260;
  --color-blue-900: #082D42;

  /* Slate */
  --color-slate-50:  #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #1B2A3B;

  /* Amber */
  --color-amber-400: #FBBF24;
  --color-amber-500: #F59E0B;
  --color-amber-600: #D97706;

  /* Semantic */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error:   #DC2626;
  --color-info:    #0284C7;

  /* 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;
  --space-16: 64px;
  --space-20: 80px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-3: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-4: 0 8px 32px rgba(0,0,0,0.12);
}