:root {
  /* Brand & primary */
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF6FF;

  --green-600: #16A34A;
  --green-100: #DCFCE7;
  --yellow-600: #CA8A04;
  --yellow-100: #FEF3C7;
  --red-600: #DC2626;
  --red-100: #FEE2E2;
  --cyan-600: #0891B2;
  --cyan-100: #CFFAFE;

  /* Semantic */
  --bg-page: var(--slate-50);
  --surface: #FFFFFF;
  --border: var(--slate-200);
  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-500);
  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --success: var(--green-600);
  --warning: var(--yellow-600);
  --danger: var(--red-600);
  --info: var(--cyan-600);

  /* Radii */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

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

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-width-tablet: 60px;
  --header-height: 56px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 22px;
  --font-size-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);
}