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

:root {
    color-scheme: light;

    --color-ink: #272727;
    --color-paper: #ececec;
    --color-white: #ffffff;
    --color-muted: #777573;
    --color-line: rgb(39 39 39 / 18%);

    --font-display: "Vazirmatn", "Tahoma", "Segoe UI", sans-serif;
    --font-body: "Vazirmatn", "Tahoma", "Segoe UI", sans-serif;

    --text-xs: clamp(0.72rem, 0.69rem + 0.13vw, 0.82rem);
    --text-sm: clamp(0.82rem, 0.79rem + 0.15vw, 0.94rem);
    --text-body: clamp(0.94rem, 0.9rem + 0.18vw, 1.06rem);
    --text-lead: clamp(1.08rem, 0.98rem + 0.45vw, 1.35rem);
    --text-heading: clamp(1.8rem, 1.45rem + 1.6vw, 3.15rem);
    --text-display: clamp(2.3rem, 1.6rem + 3.4vw, 5rem);

    --space-1: clamp(0.3rem, 0.25rem + 0.2vw, 0.5rem);
    --space-2: clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem);
    --space-3: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    --space-4: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
    --space-5: clamp(2.2rem, 1.7rem + 2vw, 3.8rem);
    --space-6: clamp(3.2rem, 2.4rem + 3.4vw, 6rem);

    --ease-okamura: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    --z-content: 10;
    --z-header: 30;
    --z-menu: 50;
    --z-loader: 80;

    --content-reading: 43rem;
    --gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}