@font-face {
    font-family: "Vazirmatn";
    src: url("/assets/fonts/Vazirmatn-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --primary: #594ae2;
    --primary-hover: color-mix(in srgb, var(--primary) 86%, #000);
    --primary-soft: color-mix(in srgb, var(--primary) 6%, #fff);
    --primary-subtle: color-mix(in srgb, var(--primary) 3%, #fff);
    --primary-border: color-mix(in srgb, var(--primary) 22%, #fff);
    --primary-focus: color-mix(in srgb, var(--primary) 13%, transparent);
    --on-primary: #fff;
    --canvas: #f3f2f7;
    --surface: #fff;
    --ink: #252333;
    --muted: #777482;
    --border: #e8e6ee;
    --field: #fcfbfd;
    --error: #b42338;
    --error-soft: #fff1f3;
    --showcase-bg: color-mix(in srgb, var(--primary) 14%, #111014);
    --showcase-ink: #fff;
    --showcase-muted: #cbc7d0;
    --metal: #d8bf96;
    --shadow: 0 16px 80px color-mix(in srgb, var(--primary) 5%, transparent);
    --font: "Vazirmatn", Tahoma, sans-serif;
    --radius: 12px;
    --duration: 180ms;
    --text-caption: 12px;
    --text-label: 13px;
    --text-body: 14px;
    --text-body-comfortable: 15px;
}

.admin-shell {
    --control-height-admin: 40px;
    --admin-space-1: 4px;
    --admin-space-2: 8px;
    --admin-space-3: 12px;
    --admin-space-4: 16px;
    --admin-space-5: 20px;
    --admin-space-6: 24px;
    --admin-card-padding: 18px;
    --admin-card-radius: 12px;
    --admin-control-radius: 8px;
    --admin-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 5%, transparent);
    --admin-shadow-hover: 0 6px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}



:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}