@font-face { font-family: "Tajawal"; src: url("/assets/fonts/tajawal-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/assets/fonts/tajawal-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/assets/fonts/tajawal-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/assets/fonts/tajawal-800.woff2") format("woff2"); font-style: normal; font-weight: 800 900; font-display: swap; }

:root {
    --font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    --sky-50: #f3f8ff;
    --sky-100: #e5f0ff;
    --sky-200: #c9dfff;
    --sky-400: #55a3ff;
    --sky-500: #2186f3;
    --sky-600: #126ee3;
    --sky-700: #1258b5;
    --navy-950: #0b2858;
    --slate-900: #14233b;
    --slate-700: #4a5f7d;
    --slate-500: #788aa3;
    --slate-300: #c8d5e5;
    --slate-200: #dfe8f3;
    --slate-100: #f3f7fc;
    --white: #ffffff;
    --green: #18a77a;
    --green-soft: #e8f9f3;
    --amber: #df941e;
    --amber-soft: #fff5df;
    --red: #d14b5a;
    --red-soft: #fff0f2;
    --violet: #7f6ce8;
    --violet-soft: #f1efff;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 8px 24px rgba(28, 78, 139, .07);
    --shadow-md: 0 24px 70px rgba(22, 66, 122, .14);
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 78px;
}