/* AIAY FINAL QA typography (Figma 02_COMPONENT_LIBRARY): Inclusive Sans for
   English, Alexandria for Arabic (declared in fonts.css), Cormorant Garamond
   for English sign quotes and display titles. Web app pages only. */
@font-face { font-family: 'Inclusive Sans'; src: url('../fonts/InclusiveSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inclusive Sans'; src: url('../fonts/InclusiveSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inclusive Sans'; src: url('../fonts/InclusiveSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inclusive Sans'; src: url('../fonts/InclusiveSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inclusive Sans'; src: url('../fonts/InclusiveSans-Bold.ttf') format('truetype'); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/CormorantGaramond-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/CormorantGaramond-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
    --app-font: 'Inclusive Sans', sans-serif;
    --app-font-ar: 'Alexandria', sans-serif;
    --app-font-serif: 'Cormorant Garamond', serif;
}

/* Serif display title (Figma: Cormorant Garamond 500 30/36 in English;
   Alexandria Bold 25/34 in Arabic). Add to any heading the frames set in
   Cormorant. */
.t-serif { font-family: var(--app-font-serif) !important; font-weight: 500 !important; font-size: 30px !important; line-height: 36px !important; letter-spacing: 0 !important; }
html[dir='rtl'] .t-serif { font-family: var(--app-font-ar) !important; font-weight: 700 !important; font-size: 25px !important; line-height: 34px !important; }
