@layer {
    :root, :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-slate-50: oklch(98.4% .003 247.858);
        --color-slate-100: oklch(96.8% .007 247.896);
        --color-slate-200: oklch(92.9% .013 255.508);
        --color-slate-300: oklch(86.9% .022 252.894);
        --color-slate-400: oklch(70.4% .04 256.788);
        --color-slate-600: oklch(44.6% .043 257.281);
        --color-slate-800: oklch(27.9% .041 260.031);
        --color-slate-900: oklch(20.8% .042 265.755);
        --color-gray-100: oklch(96.7% .003 264.542);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --text-6xl: 3.75rem;
        --text-6xl--line-height: 1;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --blur-sm: 8px;
        --default-transition-duration: .3s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --font-light: 300;
        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        --font-extrabold: 800;
        --font-black: 900;
        --color-primary: #c04;
        --color-secondary: #0c6;
        --color-primary-light: #ff4d6b;
        --color-primary-dark: #a30033;
        --color-back: #f1f1f3;
    }
}

@layer base {
    html {
        font-size: 14px;
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    html, body {
        font-family: var(--font-medium);
        color: #3a3a3a;
        font-variation-settings: "wght" var(--font-medium), "dots" 1;
        -moz-font-feature-settings: "ss02";
        -webkit-font-feature-settings: "ss02";
        font-feature-settings: "ss02";
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family);
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }

    @font-face {
        font-family: IRANYekanX VF;
        src: url(../fonts/woff/IRANYekanXVF.woff)format("woff-variations"),url(../fonts/woff/IRANYekanXVF.woff)format("woff"),url(../fonts/woff2/IRANYekanXVF.woff2)format("woff2");
        font-display: fallback;
        font-weight: 100 1000
    }

    @font-face {
        font-family: IRANYekanX;
        font-style: normal;
        font-weight: 300;
        src: url(../fonts/woff2/IRANYekanX-Light.woff2)format("woff2"),url(../fonts/woff/IRANYekanX-Light.woff)format("woff")
    }

    @font-face {
        font-family: IRANYekanX;
        font-style: normal;
        font-weight: 400;
        src: url(../fonts/woff2/IRANYekanX-Regular.woff2)format("woff2"),url(../fonts/woff/IRANYekanX-Regular.woff)format("woff")
    }

    @font-face {
        font-family: IRANYekanX;
        font-style: normal;
        font-weight: 500;
        src: url(../fonts/woff2/IRANYekanX-Medium.woff2)format("woff2"),url(../fonts/woff/IRANYekanX-Medium.woff)format("woff")
    }

    @font-face {
        font-family: IRANYekanX;
        font-style: normal;
        font-weight: 700;
        src: url(../fonts/woff2/IRANYekanX-Bold.woff2)format("woff2"),url(../fonts/woff/IRANYekanX-Bold.woff)format("woff")
    }

    @font-face {
        font-family: IRANYekanX;
        font-style: normal;
        font-weight: 900;
        src: url(../fonts/woff2/IRANYekanX-ExtraBold.woff2)format("woff2"),url(../fonts/woff/IRANYekanX-ExtraBold.woff)format("woff")
    }

    body {
        font-family: IRANYekanX,tahoma
    }

    @supports (font-variation-settings: normal) {
        body {
            font-family: IRANYekanX VF,tahoma
        }
    }
}

@layer utilities {
    .font-light {
        font-variation-settings: "wght" var(--font-light), "dots" 1;
        -moz-font-feature-settings: "ss02";
        -webkit-font-feature-settings: "ss02";
        font-feature-settings: "ss02";
    }

    .font-bold {
        font-variation-settings: "wght" var(--font-bold), "dots" 1;
        -moz-font-feature-settings: "ss02";
        -webkit-font-feature-settings: "ss02";
        font-feature-settings: "ss02";
    }

    .font-black {
        font-variation-settings: "wght" var(--font-black), "dots" 1;
        -moz-font-feature-settings: "ss02";
        -webkit-font-feature-settings: "ss02";
        font-feature-settings: "ss02";
    }


}