:root {
  --font-family: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", system-ui, sans-serif;

  --brand-950: #0a242a;
  --brand-900: #12363d;
  --brand-800: #194951;
  --brand-700: #235d65;
  --brand-100: #dfecec;
  --brand-50: #eff6f5;

  --accent-700: #087a6f;
  --accent-600: #0a9183;
  --accent-500: #13a391;
  --accent-100: #d8f1ec;
  --accent-50: #edf9f6;

  --sand-100: #f5efe2;
  --sand-200: #eadfc9;
  --amber-700: #a85c0b;
  --amber-100: #ffebc7;
  --amber-50: #fff7e8;
  --red-700: #b43b45;
  --red-100: #f8dadd;
  --red-50: #fff1f2;
  --blue-700: #356ab3;
  --blue-50: #eff6ff;

  --ink-950: #101a1e;
  --ink-800: #29383d;
  --ink-700: #405158;
  --ink-600: #5c6b70;
  --ink-500: #79868a;
  --ink-300: #b9c2c3;
  --ink-200: #d6dcdb;
  --ink-100: #e8ecea;
  --ink-50: #f5f7f5;

  --canvas: #f5f6f2;
  --surface: #ffffff;
  --surface-soft: #fafbf8;
  --surface-warm: #fbf8f1;

  --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;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-round: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 26, 30, 0.04);
  --shadow-sm: 0 8px 24px rgba(19, 41, 45, 0.06);
  --shadow-md: 0 18px 50px rgba(14, 34, 39, 0.12);

  --motion-fast: 120ms;
  --motion-ui: 170ms;
  --motion-enter: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-ui: 0ms;
    --motion-enter: 0ms;
  }
}