@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
  --font-family-base: 'IBM Plex Sans Arabic', sans-serif;
  --spacing-unit: 8px;
  --color-bg-base: #0f1115;
  --color-bg-surface: #181b21;
  --color-bg-subtle: #22262f;
  --color-border: #2e3440;
  --color-border-hover: #3d4554;
  --color-text-primary: #eceff4;
  --color-text-secondary: #d8dee9;
  --color-text-muted: #8892b0;
  --color-gold-primary: #d4af37;
  --color-gold-hover: #e5c158;
  --color-danger: #bf616a;
  --color-success: #a3be8c;
  --color-warning: #ebcb8b;
}

body {
  font-family: var(--font-family-base);
  direction: rtl;
  text-align: right;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

input, select, textarea, button {
  font-family: var(--font-family-base);
}