/* ==========================================================
   Bahonar Hospital Design System
   Typography
   ========================================================== */

/* ===========================
   FONT
=========================== */

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-display: swap;
    font-weight: 100 900;
    font-style: normal;
}

/* ===========================
   ROOT
=========================== */

html {

    font-size:16px;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

body{

    margin:0;

    direction:rtl;

    text-align:right;

    font-family:"Vazirmatn",sans-serif;

    font-size:var(--fs-body);

    font-weight:var(--fw-normal);

    line-height:var(--lh-loose);

    color:var(--color-text);

    background:var(--color-background);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/* ===========================
   HEADINGS
=========================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    line-height:1.45;

    color:var(--color-text);

    font-weight:var(--fw-black);

}

h1{

    font-size:var(--fs-h1);

}

h2{

    font-size:var(--fs-h2);

}

h3{

    font-size:var(--fs-h3);

}

h4{

    font-size:var(--fs-h4);

}

h5{

    font-size:var(--fs-h5);

}

h6{

    font-size:var(--fs-h6);

}

/* ===========================
   DISPLAY
=========================== */

.display-title{

    font-size:var(--fs-display);

    font-weight:900;

    line-height:1.25;

}

/* ===========================
   PARAGRAPH
=========================== */

p{

    margin:0;

    line-height:2;

    color:var(--color-text-light);

    font-size:var(--fs-body);

}

.lead{

    font-size:var(--fs-body-lg);

    line-height:2.15;

    color:var(--color-text);

}

.small{

    font-size:var(--fs-small);

}

.caption{

    font-size:var(--fs-caption);

    color:var(--color-text-muted);

}

/* ===========================
   LINKS
=========================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition-fast);

}

a:hover{

    color:var(--color-primary);

}

/* ===========================
   LISTS
=========================== */

ul,
ol{

    margin:0;

    padding:0;

    list-style:none;

}

/* ===========================
   IMAGE
=========================== */

img{

    max-width:100%;

    display:block;

    height:auto;

}

/* ===========================
   INPUT
=========================== */

input,
textarea,
select,
button{

    font-family:inherit;

}

/* ===========================
   SELECTION
=========================== */

::selection{

    background:var(--color-primary);

    color:#fff;

}

/* ===========================
   PLACEHOLDER
=========================== */

::placeholder{

    color:var(--color-text-muted);

    opacity:1;

}

/* ===========================
   FOCUS
=========================== */

:focus-visible{

    outline:3px solid rgba(15,108,189,.18);

    outline-offset:2px;

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:#b8c8d8;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-primary);

}

/* ===========================
   TABLE
=========================== */

table{

    width:100%;

    border-collapse:collapse;

}

/* ===========================
   HR
=========================== */

hr{

    border:none;

    height:1px;

    background:var(--color-divider);

    margin:2rem 0;

}

/* ===========================
   RTL Helpers
=========================== */

[dir="rtl"]{

    unicode-bidi:embed;

}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width:992px){

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:24px;

    }

    .display-title{

        font-size:42px;

    }

}

@media (max-width:768px){

    body{

        font-size:15px;

    }

    h1{

        font-size:30px;

    }

    h2{

        font-size:25px;

    }

    h3{

        font-size:22px;

    }

    h4{

        font-size:20px;

    }

    .display-title{

        font-size:34px;

    }

    p{

        line-height:1.95;

    }

}