*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    font-size: clamp(15px, 1.2vw + 10px, 16px);
}

@font-face {
    font-family: 'Vazir';
    src: url('/static/fonts/Vazirmatn-RD-Medium.woff2') format('woff2');
    direction: rtl;
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    font-family: Vazir, IRANSansX, "Segoe UI", Tahoma, sans-serif;
    color: var(--fg);
    background: var(--bg);
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}


/* ------------------------------
       1) DESIGN TOKENS (Light/Dark)
       ------------------------------ */

 :root {
    /* brand */
    --brand-600: #2563eb;
    /* primary */
    --brand-700: #1d4ed8;
    --brand-50: #eff6ff;
    /* neutrals */
    --bg: #0b0f14;
    /* dark base background */
    --card: #111827;
    /* surfaces */
    --elev: #0f172a;
    /* elevated surfaces */
    --fg: #e5e7eb;
    /* primary text */
    --muted: #94a3b8;
    /* secondary text */
    --line: #1f2937;
    /* borders */
    /* states */
    --success-600: #16a34a;
    --success-50: #052e16;
    --warn-600: #d97706;
    --warn-50: #251a00;
    --danger-600: #ef4444;
    --danger-50: #2a0a0a;
    /* effects */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .25);
    /* radius + spacing + typography scale */
    --r-sm: .5rem;
    --r-md: 1rem;
    --r-lg: 1.25rem;
    --r-xl: 1.75rem;
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-12: 3rem;
    --fs-12: .75rem;
    --fs-14: .875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-32: 2rem;
    --container: 1200px;
    /* focus ring */
    --ring: 0 0 0 3px color-mix(in srgb, var(--brand-600) 35%, transparent);
    --bp-sm: 640px;
    /* موبایل بزرگ */
    --bp-md: 768px;
    /* تبلت عمودی */
    --bp-lg: 992px;
    /* تبلت افقی/لپ‌تاپ کوچک */
    --bp-xl: 1280px;
    /* دسکتاپ */
}

@media (prefers-color-scheme: light) {
     :root {
        --bg: #f8fafc;
        --elev: #ffffff;
        --card: #ffffff;
        --fg: #0f172a;
        --muted: #475569;
        --line: #e2e8f0;
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
        --shadow-2: 0 12px 36px rgba(2, 6, 23, .12);
    }
}

@media (prefers-color-scheme: dark) {
     :root {
        --bg: #f8fafc;
        --card: #ffffff;
        --elev: #ffffff;
        --fg: #0f172a;
        --muted: #475569;
        --line: #e2e8f0;
        color-scheme: light;
    }
}