/* Design tokens taken from the Tiryaq Figma file */

/* Bahij TheSansArabic is the font used in the design. It is a licensed font:
   put the .woff2 files in assets/fonts/ and they are picked up automatically.
   Until then the system font is used. */
@font-face { font-family: "Bahij TheSansArabic"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/BahijTheSansArabic-Plain.woff2") format("woff2"); }
@font-face { font-family: "Bahij TheSansArabic"; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/BahijTheSansArabic-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Bahij TheSansArabic"; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/BahijTheSansArabic-Bold.woff2") format("woff2"); }

:root {
  /* Colours */
  --turquoise: #0cbdbd;
  --turquoise-dark: #099a9a;
  --ice: #e7fafa;
  --charcoal: #1f1f1f;
  --gray-text: #5c5c66;
  --gray-light: #f0f0f3;
  --divider: #e6e6ea;
  --white: #ffffff;

  /* Type */
  --font: "Bahij TheSansArabic", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", Roboto, sans-serif;
  --fs-display: 24px;  --lh-display: 32px;
  --fs-title: 20px;    --lh-title: 32px;
  --fs-body: 14px;     --lh-body: 20px;
  --fs-small: 12px;    --lh-small: 16px;

  /* Shape and spacing */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --gutter: 16px;
  --content-max: 480px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}