@font-face {
  font-family: "Jannah";
  src: url("../../Fonts/janna_LT_bold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Uthmani Hafs";
  src: url("../../Fonts/uthmanic_hafs_v20.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "Iowan Old Style", "Palatino", "Palatino Linotype",
    "Book Antiqua", "Georgia", serif;
  --font-ar: "Jannah", "SF Arabic", "Avenir Next Arabic",
    "Helvetica Neue Arabic", "DIN Next Arabic", "Noto Sans Arabic",
    "Noto Naskh Arabic UI", "Tahoma", "Arial", "Geeza Pro", sans-serif;
  --font-ayah: "Uthmani Hafs", "Jannah", "Noto Naskh Arabic UI",
    "Geeza Pro", serif;

  --color-bg: #f6f4ee;
  --color-bg-accent: #e8efe9;
  --color-surface: #ffffff;
  --color-surface-alt: #f1efe6;
  --color-border: #e1ddd2;
  --color-text: #151410;
  --color-muted: #4f4a41;
  --color-accent: #0f6d5f;
  --color-accent-contrast: #ffffff;
  --color-danger: #b0463c;
  --color-card-grad-start: #ffffff;
  --color-card-grad-end: #f3efe5;
  --color-card-accent: rgba(15, 109, 95, 0.08);
  --color-pill-bg: rgba(255, 255, 255, 0.7);
  --color-pill-border: rgba(0, 0, 0, 0.08);

  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 24px 50px rgba(15, 25, 19, 0.18);

  --radius-1: 8px;
  --radius-2: 14px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 32px;

  --transition: 180ms ease;
  --max-width: 720px;
}