@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Base Typography & English Defaults
   Manrope is the default font across all web pages in English
   ========================================================================== */
:root {
    --bs-body-font-family: 'Manrope', sans-serif;
    --bs-font-sans-serif: 'Manrope', sans-serif;
    --font-family-base: 'Manrope', sans-serif;
    --font-family-sans: 'Manrope', sans-serif;
    font-family: 'Manrope', sans-serif;
}

html,
body {
    font-family: 'Manrope', sans-serif;
}

button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
}

/* English / LTR Explicit Selectors */
html[lang^='en'],
html[lang]:not([lang^='ar']),
html[dir='ltr'],
html:not([dir='rtl']) {
    --bs-body-font-family: 'Manrope', sans-serif;
    --bs-font-sans-serif: 'Manrope', sans-serif;
    --font-family-base: 'Manrope', sans-serif;
    --font-family-sans: 'Manrope', sans-serif;
    font-family: 'Manrope', sans-serif;
}

html[lang^='en'] body,
html[lang]:not([lang^='ar']) body,
html[dir='ltr'] body,
html:not([dir='rtl']) body,
html[lang^='en'] button,
html[lang]:not([lang^='ar']) button,
html[dir='ltr'] button,
html[lang^='en'] input,
html[lang]:not([lang^='ar']) input,
html[dir='ltr'] input,
html[lang^='en'] select,
html[lang]:not([lang^='ar']) select,
html[dir='ltr'] select,
html[lang^='en'] textarea,
html[lang]:not([lang^='ar']) textarea,
html[dir='ltr'] textarea {
    font-family: 'Manrope', sans-serif;
}

/* Arabic / RTL Overrides */
html[lang^='ar'],
html[dir='rtl'] {
    --bs-body-font-family: 'Tajawal', sans-serif;
    --bs-font-sans-serif: 'Tajawal', sans-serif;
    --font-family-base: 'Tajawal', sans-serif;
    --font-family-sans: 'Tajawal', sans-serif;
    font-family: 'Tajawal', sans-serif;
}

html[lang^='ar'] body,
html[dir='rtl'] body,
html[lang^='ar'] button,
html[dir='rtl'] button,
html[lang^='ar'] input,
html[dir='rtl'] input,
html[lang^='ar'] select,
html[dir='rtl'] select,
html[lang^='ar'] textarea,
html[dir='rtl'] textarea {
    font-family: 'Tajawal', sans-serif;
}

/* ==========================================================================
   Tajawal - default Arabic font
   ========================================================================== */
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/Tajawal-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/Tajawal-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/Tajawal-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-tajawal: 'Tajawal', sans-serif;
}

/* ==========================================================================
   Alexandria - QA Arabic typography font
   ========================================================================== */
@font-face {
    font-family: 'Alexandria';
    src: url('../fonts/Alexandria-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alexandria';
    src: url('../fonts/Alexandria-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alexandria';
    src: url('../fonts/Alexandria-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   AIAY Final QA Semantic Typography Scale (EN: Inclusive Sans / Manrope, AR: Alexandria)
   Specimen Ramp (Color: #2F241F)
   ========================================================================== */
.aiay-typo-display {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-display {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-screen-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-screen-title {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-section-heading {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-section-heading {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-card-heading {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-card-heading {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-body {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-supporting {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-supporting {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-button {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-button {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-input {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-input {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-navigation {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-navigation {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}

.aiay-typo-caption,
.aiay-typo-legal {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #2F241F;
}
html[dir='rtl'] .aiay-typo-caption,
html[dir='rtl'] .aiay-typo-legal {
    font-family: 'Alexandria', sans-serif;
    line-height: 1.5;
    text-align: right;
}