/* =========================================================
   Bazarak design tokens (docs/02-uiux.md)
   Light and dark palettes + spacing, radius, motion.
   ========================================================= */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root,
[data-bs-theme='light'] {
    --bg-0: #F6F8FF;
    --bg-1: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #EEF2FF;
    --border: #E3E8FA;
    --text-1: #0B1020;
    --text-2: #4A5578;
    --text-3: #7C87AB;

    --primary: #3D63F0;
    --primary-2: #6D4DF2;
    --accent: #22D3EE;
    --link: #2F55D4;
    --on-primary: #FFFFFF;

    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #38BDF8;

    --grad-primary: linear-gradient(135deg, #3D63F0, #6D4DF2 60%, #22D3EE 140%);
    --shadow-card: 0 6px 24px -12px rgba(11, 16, 32, .18);
    --glass-bg: rgba(255, 255, 255, .75);
    --glass-border: rgba(11, 16, 32, .08);
    --nav-bg: rgba(255, 255, 255, .92);
}

[data-bs-theme='dark'] {
    --bg-0: #070B18;
    --bg-1: #0B1020;
    --surface: #121A33;
    --surface-2: #1B2548;
    --border: rgba(255, 255, 255, .10);
    --text-1: #E8ECFF;
    --text-2: #9AA6D1;
    --text-3: #6E7AA8;

    --primary: #4F7CFF;
    --primary-2: #8B6CFF;
    --accent: #22D3EE;
    --link: #6A90FF;
    --on-primary: #FFFFFF;

    --success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --info: #38BDF8;

    --grad-primary: linear-gradient(135deg, #4F7CFF, #8B6CFF 60%, #22D3EE 140%);
    --shadow-card: 0 10px 30px -14px rgba(0, 0, 0, .6);
    --glass-bg: rgba(18, 26, 51, .65);
    --glass-border: rgba(255, 255, 255, .10);
    --nav-bg: rgba(11, 16, 32, .92);
}

:root {
    /* spacing scale (multiples of 4) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* radius */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    /* motion */
    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 320ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* layout */
    --sidebar-w: 250px;
    --header-h: 64px;
    --bottom-nav-h: 64px;

    /* z */
    --z-header: 100;
    --z-bottom-nav: 100;
    --z-fab: 120;
    --z-toast: 300;

    /* bootstrap overrides */
    --bs-primary: var(--primary);
    --bs-body-bg: var(--bg-0);
    --bs-body-color: var(--text-1);
    --bs-link-color: var(--link);
    --bs-border-color: var(--border);
    --bs-emphasis-color: var(--text-1);
    --bs-secondary-color: var(--text-2);
    --bs-tertiary-bg: var(--surface-2);
}