/* Apply Vazirmatn as website's font */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/lib/vazirmatn/vazirmatn.woff2") format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/lib/vazirmatn/vazirmatn.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/lib/vazirmatn/vazirmatn.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: Regular;
    font-style: normal;
}

/* Apply loading page */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111411;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #6acc77;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loaded #preloader {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-out;
}

/* Apply green color */
:root, body.light {
    --primary: #006e29;
    --on-primary: #ffffff;
    --primary-container: #91f99c;
    --on-primary-container: #002107;
    --secondary: #516350;
    --on-secondary: #ffffff;
    --secondary-container: #d4e8d0;
    --on-secondary-container: #0f1f10;
    --tertiary: #39656c;
    --on-tertiary: #ffffff;
    --tertiary-container: #bceaf2;
    --on-tertiary-container: #001f24;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --background: #fcfdf7;
    --on-background: #1a1c19;
    --surface: #f9faf4;
    --on-surface: #1a1c19;
    --surface-variant: #dee5d9;
    --on-surface-variant: #424940;
    --outline: #727970;
    --outline-variant: #c2c9be;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #2f312d;
    --inverse-on-surface: #f0f1eb;
    --inverse-primary: #76dc82;
    --surface-dim: #d9dbd5;
    --surface-bright: #f9faf4;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f4ee;
    --surface-container: #edeee8;
    --surface-container-high: #e8e9e3;
    --surface-container-highest: #e2e3dd;
}

body.dark {
    --primary: #76dc82;
    --on-primary: #003911;
    --primary-container: #00531d;
    --on-primary-container: #91f99c;
    --secondary: #b8ccb5;
    --on-secondary: #243424;
    --secondary-container: #3a4b3a;
    --on-secondary-container: #d4e8d0;
    --tertiary: #a1ced6;
    --on-tertiary: #00363d;
    --tertiary-container: #1f4d54;
    --on-tertiary-container: #bceaf2;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffb4ab;
    --background: #1a1c19;
    --on-background: #e2e3dd;
    --surface: #111411;
    --on-surface: #e2e3dd;
    --surface-variant: #424940;
    --on-surface-variant: #c2c9be;
    --outline: #8c9389;
    --outline-variant: #424940;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #e2e3dd;
    --inverse-on-surface: #2f312d;
    --inverse-primary: #006e29;
    --surface-dim: #111411;
    --surface-bright: #373a36;
    --surface-container-lowest: #0c0f0c;
    --surface-container-low: #1a1c19;
    --surface-container: #1e201d;
    --surface-container-high: #282b27;
    --surface-container-highest: #333532;
}