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

:root {
    --font: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-lg: 1.375rem;
    --leading: 1.8;
    --leading-tight: 1.4;

    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
    --dur-1: 130ms; --dur-2: 220ms; --dur-3: 340ms;

    --sidebar-w: 260px;
    --topbar-h: 64px;
    --content-max: 1280px;
    --control-h: 42px;
    --control-h-sm: 34px;
    --control-h-lg: 48px;

    --z-dropdown: 40; --z-sticky: 50; --z-drawer: 60; --z-modal: 70; --z-toast: 80;

    --hue-accent: 170;
    --hue-accent-2: 182;
    --hue-superset: 218;
    --hue-success: 150;
    --hue-warning: 40;
    --hue-danger: 358;
}

:root,
:root[data-theme="dark"] {
    --body-fill: #3a404b;
    --body-gap: #252a32;
    --muscle: #f0454b;
    color-scheme: dark;

    --bg:          #0b0d10;
    --bg-elev:     #111418;
    --surface:     #15181d;
    --surface-2:   #1b1f25;
    --surface-3:   #252a32;
    --overlay:     rgba(3, 5, 10, .74);

    --border:        rgba(148, 163, 184, .10);
    --border-strong: rgba(148, 163, 184, .20);
    --highlight:     rgba(255, 255, 255, .045);

    --text:   #f1f2f4;
    --text-2: #a3a9b4;
    --text-3: #6b7280;
    --text-on-accent: #ffffff;

    --accent:          hsl(var(--hue-accent) 52% 52%);
    --accent-strong:   hsl(var(--hue-accent) 52% 44%);
    --accent-soft:     hsl(var(--hue-accent) 50% 50% / .14);
    --accent-ring:     hsl(var(--hue-accent) 52% 52% / .32);
    --accent-gradient: linear-gradient(135deg, hsl(var(--hue-accent) 52% 46%) 0%, hsl(var(--hue-accent-2) 48% 42%) 100%);
    --accent-glow:     0 6px 18px -8px hsl(var(--hue-accent) 50% 40% / .45);

    --superset:      hsl(var(--hue-superset) 60% 66%);
    --superset-soft: hsl(var(--hue-superset) 55% 55% / .14);

    --success:      hsl(var(--hue-success) 50% 52%);
    --success-soft: hsl(var(--hue-success) 50% 46% / .14);
    --warning:      hsl(var(--hue-warning) 80% 58%);
    --warning-soft: hsl(var(--hue-warning) 80% 52% / .14);
    --danger:       hsl(var(--hue-danger) 68% 64%);
    --danger-soft:  hsl(var(--hue-danger) 68% 58% / .14);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-2: 0 6px 16px -6px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-3: 0 28px 56px -16px rgba(0, 0, 0, .75), 0 4px 10px rgba(0, 0, 0, .35);
    --shadow-drag: 0 24px 48px -12px rgba(0, 0, 0, .8), 0 0 0 1px var(--border-strong);

    --skeleton-a: #191d27;
    --skeleton-b: #232838;

    --page-glow: radial-gradient(900px 480px at 85% -10%, hsl(var(--hue-accent) 50% 45% / .06), transparent 70%),
                 radial-gradient(700px 400px at 10% 110%, hsl(var(--hue-superset) 50% 50% / .04), transparent 70%);
}

:root[data-theme="light"] {
    --body-fill: #c9ccd3;
    --body-gap: #ebebee;
    --muscle: #e3262d;
    color-scheme: light;

    --bg:          #f4f4f5;
    --bg-elev:     #ffffff;
    --surface:     #ffffff;
    --surface-2:   #f6f6f7;
    --surface-3:   #ebebee;
    --overlay:     rgba(16, 20, 32, .5);

    --border:        rgba(20, 28, 48, .08);
    --border-strong: rgba(20, 28, 48, .16);
    --highlight:     rgba(255, 255, 255, .8);

    --text:   #18181b;
    --text-2: #52525b;
    --text-3: #8b8b95;
    --text-on-accent: #ffffff;

    --accent:          hsl(var(--hue-accent) 55% 36%);
    --accent-strong:   hsl(var(--hue-accent) 55% 30%);
    --accent-soft:     hsl(var(--hue-accent) 50% 40% / .10);
    --accent-ring:     hsl(var(--hue-accent) 55% 40% / .28);
    --accent-gradient: linear-gradient(135deg, hsl(var(--hue-accent) 55% 38%) 0%, hsl(var(--hue-accent-2) 50% 34%) 100%);
    --accent-glow:     0 6px 18px -8px hsl(var(--hue-accent) 55% 30% / .4);

    --superset:      hsl(var(--hue-superset) 55% 46%);
    --superset-soft: hsl(var(--hue-superset) 55% 50% / .11);

    --success:      hsl(var(--hue-success) 50% 34%);
    --success-soft: hsl(var(--hue-success) 50% 40% / .12);
    --warning:      hsl(var(--hue-warning) 80% 36%);
    --warning-soft: hsl(var(--hue-warning) 85% 50% / .15);
    --danger:       hsl(var(--hue-danger) 62% 46%);
    --danger-soft:  hsl(var(--hue-danger) 62% 50% / .10);

    --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px rgba(16, 24, 40, .03);
    --shadow-2: 0 6px 16px -6px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-3: 0 28px 56px -16px rgba(16, 24, 40, .26), 0 4px 10px rgba(16, 24, 40, .06);
    --shadow-drag: 0 24px 48px -12px rgba(16, 24, 40, .38), 0 0 0 1px var(--border-strong);

    --skeleton-a: #eceef4;
    --skeleton-b: #f7f8fb;

    --page-glow: radial-gradient(900px 480px at 85% -10%, hsl(var(--hue-accent) 50% 50% / .06), transparent 70%),
                 radial-gradient(700px 400px at 10% 110%, hsl(var(--hue-superset) 50% 50% / .04), transparent 70%);
}