/* ===== الخطوط المحلية ===== */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype')
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype')
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype')
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype')
}

/* ===== نظام التصميم (Design Tokens) ===== */
:root {
    --ink-950: #0A1024;
    --ink-900: #0B1220;
    --ink-800: #16213E;
    --primary-600: #1E3A8A;
    --primary-500: #2563EB;
    --accent-600: #059669;
    --accent-500: #10B981;
    --accent-400: #34D399;
    --surface-0: #FFFFFF;
    --surface-50: #F8FAFC;
    --surface-100: #F1F5F9;
    --gray-500: #64748B;
    --gray-700: #334155;
    --gray-300: #CBD5E1;

    --primary-blue-dark: #1E3A8A;
    --primary-blue: #2563EB;
    --primary-blue-light: #3B82F6;
    --success-green: #10B981;
    --success-green-light: #34D399;
    --neutral-gray: #64748B;
    --neutral-gray-light: #EEF1F5;
    --text-dark: #0B1220;
    --text-body: #334155;
    --background: #F3F6FA;
    --background-alt: #E9EEF5;
    --border-color: #E7E9EE;
    --danger-red: #E5484D;
    --warning-amber: #F59E0B;

    --accent: #2563EB;
    --accent-strong: #1D4ED8;
    --accent-soft: #EEF3FF;
    --accent-green-soft: rgba(16, 185, 129, 0.1);
    --accent-green-line: rgba(16, 185, 129, 0.3);
    --ink: #0B1220;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E7E9EE;
    --gray-300: #D6DAE2;
    --text-muted: #64748B;
    --surface-dark: #0A1024;
    --surface-dark-2: #16213E;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-30: 120px;
    --space-32: 128px;

    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-3xl: 38px;
    --fs-4xl: 48px;
    --fs-5xl: 60px;

    --lh-tight: 1.12;
    --lh-heading: 1.25;
    --lh-body: 1.7;

    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-static: 0 1px 2px rgba(11, 18, 32, 0.04), 0 2px 6px rgba(11, 18, 32, 0.05);
    --shadow-float: 0 18px 40px -14px rgba(11, 18, 32, 0.22), 0 6px 16px -8px rgba(11, 18, 32, 0.10);
    --shadow-soft: 0 18px 40px -14px rgba(11, 18, 32, 0.22), 0 6px 16px -8px rgba(11, 18, 32, 0.10);
    --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04), 0 2px 6px rgba(11, 18, 32, 0.05);
    --shadow-window: 0 20px 40px -10px rgba(10, 16, 36, 0.15), 0 4px 12px -2px rgba(10, 16, 36, 0.08);
    --shadow-accent: 0 8px 22px -6px rgba(37, 99, 235, 0.45);
    --shadow-accent-green: 0 10px 30px -8px rgba(16, 185, 129, 0.5);

    --transition-fast: all 0.15s ease;
    --transition: all 0.2s ease;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --gradient-brand: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
    --gradient-accent: linear-gradient(135deg, #2563EB 0%, #10B981 100%);
    --gradient-dark: linear-gradient(160deg, #0A1024 0%, #16213E 60%, #1E3A8A 120%);
    --mesh-light: radial-gradient(38% 48% at 14% 12%, rgba(37, 99, 235, 0.10), transparent 70%), radial-gradient(34% 44% at 86% 18%, rgba(16, 185, 129, 0.08), transparent 70%), radial-gradient(30% 40% at 62% 0%, rgba(30, 58, 138, 0.07), transparent 72%);
    --mesh-page: radial-gradient(ellipse 90% 55% at 8% -5%, rgba(37, 99, 235, 0.07), transparent 58%), radial-gradient(ellipse 80% 50% at 92% 12%, rgba(16, 185, 129, 0.06), transparent 55%), radial-gradient(ellipse 70% 45% at 50% 105%, rgba(30, 58, 138, 0.05), transparent 60%);
    --mesh-dark: radial-gradient(40% 50% at 16% 10%, rgba(37, 99, 235, 0.35), transparent 70%), radial-gradient(36% 46% at 84% 16%, rgba(16, 185, 129, 0.28), transparent 70%)
}