:root {
  /* Unified Design Tokens */
  --font-arabic: 'Tajawal', 'Cairo', 'IBM Plex Arabic', Tahoma, Arial, sans-serif;
  --font-latin: 'Inter', 'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Sizing and radius */
  --ds-radius-sm: 0.375rem;
  --ds-radius: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-xl: 1rem;
  --ds-radius-full: 9999px;

  /* Spacing scale */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;

  /* Elevation */
  --ds-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --ds-shadow-md: 0 10px 15px -3px rgba(0,0,0,.12);
  --ds-shadow-lg: 0 20px 25px -5px rgba(0,0,0,.15);
}

/* Typography & Direction */
html[lang="ar"] body,
[dir="rtl"] body {
  font-family: var(--font-arabic), var(--font-latin);
}

html[lang]:not([lang="ar"]) body,
[dir="ltr"] body {
  font-family: var(--font-latin), var(--font-arabic);
}

/* Theme bridge: prefer data-theme over body.dark-mode */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Utilities */
.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.rounded-xl { border-radius: var(--ds-radius-xl) !important; }
.shadow-lg { box-shadow: var(--ds-shadow-lg) !important; }
.shadow-md { box-shadow: var(--ds-shadow-md) !important; }

/* Responsive container max-width alignment */
.container {
  max-width: 1280px;
}

/* Smooth transitions */
* { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* Better focus ring */
*:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb, 37,99,235), .8);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

/* RTL icon spacing helpers */
[dir="rtl"] .with-icon i { margin-left: .5rem; margin-right: 0; }
[dir="ltr"] .with-icon i { margin-right: .5rem; margin-left: 0; }