/* Arabic-first defaults (highly recommended) */

/* Set once globally */

body {
    font-size: var(--fs-3);
    line-height: var(--lh-normal);
    font-weight: 400;
    text-align: start;
}

/* Font size scale (mobile first)
 */
:root {
    --fs-1: 0.75rem; /* 12px */
    --fs-2: 0.875rem; /* 14px */
    --fs-3: 1rem; /* 16px (base) */
    --fs-3-5: 1.125rem; /* 18px */
    --fs-4: 1.25rem; /* 20px */
    --fs-5: 1.5rem; /* 24px */
    --fs-6: 2rem; /* 32px */

    --lh-tight: 1.25;
    --lh-normal: 1.6;
    --lh-relaxed: 1.9;
}

/* Tablet scaling (md ≥ 768px)
 */
@media (min-width: 768px) {
    :root {
        --fs-1: 0.8125rem; /* 13px */
        --fs-2: 0.9375rem; /* 15px */
        --fs-3: 1.0625rem; /* 17px */
        --fs-3-5: 1.1875rem; /* 19px */
        --fs-4: 1.375rem; /* 22px */
        --fs-5: 1.75rem; /* 28px */
        --fs-6: 2.25rem; /* 36px */
    }
}

/* Desktop scaling (lg ≥ 992px)
 */
@media (min-width: 992px) {
    :root {
        --fs-1: 0.875rem; /* 14px */
        --fs-2: 1rem; /* 16px */
        --fs-3: 1.125rem; /* 18px */
        --fs-3-5: 1.25rem; /* 20px */
        --fs-4: 1.5rem; /* 24px */
        --fs-5: 2rem; /* 32px */
        --fs-6: 2.75rem; /* 44px */
    }
}

/* Large desktop (xl ≥ 1200px)
 */
@media (min-width: 1200px) {
    :root {
        --fs-1: 0.9375rem; /* 15px */
        --fs-2: 1.0625rem; /* 17px */
        --fs-3: 1.25rem; /* 20px */
        --fs-3-5: 1.375rem; /* 22px */
        --fs-4: 1.75rem; /* 28px */
        --fs-5: 2.5rem; /* 40px */
        --fs-6: 3.25rem; /* 52px */
    }
}

/* Font size utility classes */

.fs-1 { font-size: var(--fs-1); }

.fs-2 { font-size: var(--fs-2); }

.fs-3 { font-size: var(--fs-3); }

.fs-3-5 { font-size: var(--fs-3-5); }

.fs-4 { font-size: var(--fs-4); }

.fs-5 { font-size: var(--fs-5); }

.fs-6 { font-size: var(--fs-6); }

/* Responsive overrides (optional, Bootstrap-style) */

/* to be used only when needed */

@media (min-width: 768px) {
    .fs-md-4 {
        font-size: var(--fs-4);
    }

    .fs-md-5 {
        font-size: var(--fs-5);
    }
}

@media (min-width: 992px) {
    .fs-lg-5 {
        font-size: var(--fs-5);
    }

    .fs-lg-6 {
        font-size: var(--fs-6);
    }
}

@media (min-width: 1200px) {
    .fs-xl-6 {
        font-size: var(--fs-6);
    }
}

/* ********** */

.lh-tight { line-height: var(--lh-tight); }

/* Headings */
.lh-normal { line-height: var(--lh-normal); }

/* Body text */
.lh-relaxed { line-height: var(--lh-relaxed); }

/* Long paragraphs */

.fw-light { font-weight: 300; }

.fw-regular { font-weight: 400; }

.fw-medium { font-weight: 500; }

.fw-semibold { font-weight: 600; }

.fw-bold { font-weight: 700; }

/* Letter-spacing */

.ls-none { letter-spacing: 0; }

.ls-tight { letter-spacing: -0.01em; }

/* Text alignment (logical & RTL-safe) */
.text-start { text-align: start; }

.text-end { text-align: end; }

.text-center { text-align: center; }

/* Text transform (use carefully with Arabic) */
.text-uppercase { text-transform: uppercase; }

/* Latin only */
.text-lowercase { text-transform: lowercase; }

.text-normalcase { text-transform: none; }

/* These combine size + line-height + weight for consistency*/
.text-body {
    font-size: var(--fs-3);
    line-height: var(--lh-normal);
    font-weight: 400;
}

.text-lead {
    font-size: var(--fs-4);
    line-height: var(--lh-normal);
    font-weight: 400;
}

.text-h1 {
    font-size: var(--fs-6);
    line-height: var(--lh-tight);
    font-weight: 600;
}

.text-h2 {
    font-size: var(--fs-5);
    line-height: var(--lh-tight);
    font-weight: 600;
}

.text-h3 {
    font-size: var(--fs-4);
    line-height: var(--lh-tight);
    font-weight: 500;
}

@media (min-width: 992px) {
    .text-h1 {
        line-height: 1.15;
    }
}