/*#region - reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: auto;
}
ul[role='list'],
ol[role='list'] {
    list-style: none;
}
body {
    font-family: Vazirmatn, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 2.3;
}

h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.4;
}

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

img,
picture {
    max-width: 100%;
    display: block;
}

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

textarea:not([rows]) {
    min-height: 10em;
}

:target {
    scroll-margin-block: 5ex;
}

button {
    -webkit-tap-highlight-color: transparent;
}
/*#endregion */

/*#region - font face */
@font-face {
    font-family: "Vazirmatn";
    font-weight: 300;
    src: local("VazirmatnLight"),
        url("../fonts/vazirmatn/Vazirmatn-FD-Light.woff2") format("woff2");
}
@font-face {
    font-family: "Vazirmatn";
    font-weight: 400;
    src: local("VazirmatnRegular"),
        url("../fonts/vazirmatn/Vazirmatn-FD-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Vazirmatn";
    font-weight: 500;
    src: local("VazirmatnMedium"),
        url("../fonts/vazirmatn/Vazirmatn-FD-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "Vazirmatn";
    font-weight: 600;
    src: local("VazirmatnSemiBold"),
        url("../fonts/vazirmatn/Vazirmatn-FD-SemiBold.woff2") format("woff2");
}
@font-face {
    font-family: "Vazirmatn";
    font-weight: 700;
    src: local("VazirmatnBold"),
        url("../fonts/vazirmatn/Vazirmatn-FD-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "Vazirmatn";
    font-weight: 900;
    src: local("VazirmatnBlack"),
        url("../fonts/vazirmatn/Vazirmatn-FD-Black.woff2") format("woff2");
}
/*#endregion */

/*#region - colors */
* {
    /*#region ───── light */
    --bg1-light: hsl(191, 34%, 33%);
    --bg2-light: hsl(200, 9%, 68%);
    --bg3-variant-light: hsl(182, 94%, 94%);
    --bg3-light: hsl(193, 22%, 84%);
    --bg4-light: hsl(204, 33%, 97%);
    --bg4-variant-light: hsl(204, 33%, 91%);
    /*  */
    --fg9-light: hsl(0, 0%, 0%);
    --fg8-light: hsl(191, 50%, 20%);
    --fg7-light: hsl(191, 26%, 40%);
    --fg0-light: hsl(0, 0%, 100%);

    --bg-err-light: hsl(6, 77%, 90%);
    --fg-err-light: hsl(5, 53%, 40%);
    --bg-warn-light: hsl(51, 83%, 81%);
    --fg-warn-light: hsl(31, 95%, 17%);
    /*#endregion */

    /*#region ─────  dark */
    --bg1-dark: hsl(39, 40%, 83%);
    --bg2-dark: hsl(61, 5%, 49%);
    --bg3-dark: hsl(133, 10%, 28%);
    --bg3-variant-dark: hsl(174, 18%, 34%);
    --bg4-dark: hsl(170, 56%, 11%);
    --bg4-variant-dark: hsl(170, 56%, 16%);
    /*  */
    --fg9-dark: hsl(0, 0%, 100%);
    --fg8-dark: hsl(36, 7%, 86%);
    --fg7-dark: hsl(38, 7%, 70%);
    --fg0-dark: hsl(0, 0%, 0%);

    --bg-err-dark: hsl(6, 45%, 33%);
    --fg-err-dark: hsl(8, 87%, 91%);
    --bg-warn-dark: hsl(53, 74%, 18%);
    --fg-warn-dark: hsl(46, 100%, 72%);
    /*#endregion */
}
html {
    color-scheme: light;
    --bg1: var(--bg1-light);
    --bg2: var(--bg2-light);
    --bg3: var(--bg3-light);
    --bg3-variant: var(--bg3-variant-light);
    --bg4: var(--bg4-light);
    --bg4-variant: var(--bg4-variant-light);
    --fg9: var(--fg9-light);
    --fg8: var(--fg8-light);
    --fg7: var(--fg7-light);
    --fg0: var(--fg0-light);
    --bg-err: var(--bg-err-light);
    --fg-err: var(--fg-err-light);
    --bg-warn: var(--bg-warn-light);
    --fg-warn: var(--fg-warn-light);
}
@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
        --bg1: var(--bg1-dark);
        --bg2: var(--bg2-dark);
        --bg3: var(--bg3-dark);
        --bg3-variant: var(--bg3-variant-dark);
        --bg4: var(--bg4-dark);
        --bg4-variant: var(--bg4-variant-dark);
        --fg9: var(--fg9-dark);
        --fg8: var(--fg8-dark);
        --fg7: var(--fg7-dark);
        --fg0: var(--fg0-dark);
        --bg-err: var(--bg-err-dark);
        --fg-err: var(--fg-err-dark);
        --bg-warn: var(--bg-warn-dark);
        --fg-warn: var(--fg-warn-dark);
    }
}
/*#endregion */

/*#region - global */
:root {
    --main-font: Vazirmatn;
}
/*#endregion */