:root {
    --color-ink-950: #03152b;
    --color-ink-900: #06213f;
    --color-ink-850: #0a2b50;
    --color-ink-800: #103a68;
    --color-blue-500: #078cff;
    --color-blue-400: #18b5ff;
    --color-cyan-400: #26d6ff;
    --color-cyan-300: #67e4ff;
    --color-violet-500: #6d63ff;
    --color-violet-400: #837cff;
    --color-surface: #ffffff;
    --color-surface-soft: #f4f8fc;
    --color-surface-muted: #eaf2fa;
    --color-text: #0b2440;
    --color-text-soft: #5d7187;
    --color-border: #d6e4f0;
    --color-success: #25b989;
    --color-warning: #c58a2a;
    --color-error: #dc4f64;

    --gradient-brand: linear-gradient(135deg, #056df4 0%, #0ca8ff 50%, #31d2ff 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(7, 140, 255, 0.16), rgba(38, 214, 255, 0.06));
    --gradient-hero-text: linear-gradient(90deg, #ffffff 0%, #93ecff 34%, #1fa6ff 72%, #837cff 100%);

    --font-ar: "DIN Next LT Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    --font-latin: Inter, "Segoe UI", Arial, sans-serif;

    --shell: min(1180px, calc(100vw - 40px));
    --shell-wide: min(1320px, calc(100vw - 40px));

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 36px;
    --radius-section: 48px;

    --shadow-sm: 0 10px 30px rgba(9, 31, 54, 0.07);
    --shadow-md: 0 24px 70px rgba(9, 31, 54, 0.12);
    --shadow-dark: 0 28px 80px rgba(0, 0, 0, 0.36);

    --header-height: 86px;
    --motion-fast: 160ms;
    --motion-medium: 260ms;

    --z-header: 20;
    --z-content: 40;
    --z-mobile-nav: 80;
}