@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-arabic/ibm-plex-sans-arabic-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-arabic/ibm-plex-sans-arabic-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-arabic/ibm-plex-sans-arabic-semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-arabic/ibm-plex-sans-arabic-bold.woff2') format('woff2');
}

:root {
    --aw-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --aw-font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --aw-font-quran: 'Amiri Quran', 'Amiri', 'Traditional Arabic', serif;

    --font-app: var(--aw-font);
    --font-heading: var(--aw-font);
    --font-text: var(--aw-font);
    --font-num: var(--aw-font);
    --font-sans: var(--aw-font);
    --font-display: var(--aw-font);
    --font: var(--aw-font);
    --font-family-base: var(--aw-font);
    --field-font: var(--aw-font);
    --ds-font-heading: var(--aw-font);
    --rk-font: var(--aw-font);
    --rk-font-num: var(--aw-font);

    --aw-caption: 0.75rem;
    --aw-small: 0.875rem;
    --aw-body: 1rem;
    --aw-sub: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --aw-heading-sm: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
    --aw-heading: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
    --aw-display: clamp(1.75rem, 1.375rem + 1.8vw, 2.5rem);
    --aw-hero: clamp(2rem, 1.25rem + 3.6vw, 3.5rem);

    --aw-lh-text: 1.6;
    --aw-lh-title: 1.3;
    --aw-lh-num: 1.1;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-text-soft: 300;
    --fw-text-normal: 400;
    --fw-text-strong: 600;

    --text-caption: var(--aw-caption);
    --text-body-sm: var(--aw-small);
    --text-body: var(--aw-body);
    --text-subheading: var(--aw-sub);
    --text-heading-sm: var(--aw-heading-sm);
    --text-heading: var(--aw-heading);

    --fs-xs: var(--aw-caption);
    --fs-sm: var(--aw-small);
    --fs-base: var(--aw-body);
    --fs-md: var(--aw-sub);
    --fs-lg: var(--aw-heading-sm);
    --fs-xl: var(--aw-heading);
    --fs-2xl: var(--aw-display);
    --fs-3xl: var(--aw-hero);
    --fs-display: var(--aw-hero);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    font-family: var(--font-app);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6, label, table, th, td, legend, figcaption {
    font-family: var(--font-app);
}

code, kbd, samp, pre {
    font-family: var(--aw-font-mono);
}

@media (max-width: 767.98px) {
    input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])),
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}