/* =========================================================
   MAJRAWI DESIGN SYSTEM
   Version: 2.0
========================================================= */

:root {

    /* =====================================================
       BRAND COLORS
    ===================================================== */

    --primary: #B1124D;
    --primary-dark: #8F0E3D;
    --primary-light: #D03B72;

    --secondary: #FFFFFF;

    /* =====================================================
       BACKGROUND
    ===================================================== */

    --background: #F8F9FC;

    --surface: #FFFFFF;

    --surface-alt: #F3F4F6;

    /* =====================================================
       TEXT COLORS
    ===================================================== */

    --text-primary: #1F2937;

    --text-secondary: #6B7280;

    --text-light: #9CA3AF;

    /* =====================================================
       BORDER
    ===================================================== */

    --border: #E5E7EB;

    --border-light: #F3F4F6;

        /* =====================================================
       STATUS COLORS
    ===================================================== */

    --success: #16A34A;

    --warning: #F59E0B;

    --danger: #DC2626;

    --info: #0EA5E9;

    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow-xs: 0 2px 8px rgba(0,0,0,.04);

    --shadow-sm: 0 4px 15px rgba(0,0,0,.05);

    --shadow-md: 0 10px 30px rgba(0,0,0,.08);

    --shadow-lg: 0 20px 60px rgba(0,0,0,.12);

    --shadow-xl: 0 30px 80px rgba(0,0,0,.16);

    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --radius-xs: 8px;

    --radius-sm: 10px;

    --radius-md: 18px;

    --radius-lg: 30px;

    --radius-xl: 40px;

    --radius-full: 999px;

    /* =====================================================
       TRANSITIONS
    ===================================================== */

    --transition-fast: .20s ease;

    --transition: .35s ease;

    --transition-slow: .50s ease;

        /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    --font-family: "Cairo", sans-serif;

    --font-size-xs: .75rem;

    --font-size-sm: .875rem;

    --font-size-base: 1rem;

    --font-size-md: 1.125rem;

    --font-size-lg: 1.5rem;

    --font-size-xl: 2rem;

    --font-size-2xl: 3rem;

    /* =====================================================
       LAYOUT
    ===================================================== */

    --container: 1280px;

    --header-height: 88px;

    --section-padding: 110px;

    /* =====================================================
       Z-INDEX
    ===================================================== */

    --z-dropdown: 100;

    --z-header: 1000;

    --z-menu: 1010;

    --z-overlay: 1020;

    --z-modal: 1100;

    --z-loader: 9999;

    /* =====================================================
       BREAKPOINTS
    ===================================================== */

    --bp-xl: 1200px;

    --bp-lg: 992px;

    --bp-md: 768px;

    --bp-sm: 576px;

    --bp-xs: 360px;

        /* =====================================================
       COMPATIBILITY VARIABLES
       (Used by all project CSS files)
    ===================================================== */

    --primary-color: var(--primary);

    --primary-dark-color: var(--primary-dark);

    --primary-light-color: var(--primary-light);

    --secondary-color: var(--secondary);

    --bg-color: var(--background);

    --surface-color: var(--surface);

    --heading-color: var(--text-primary);

    --text-color: var(--text-primary);

    --text-secondary-color: var(--text-secondary);

    --text-light-color: var(--text-light);

    --border-color: var(--border);

    /* =====================================================
       EFFECTS
    ===================================================== */

    --glass-bg: rgba(255,255,255,.72);

    --glass-border: rgba(255,255,255,.45);

    --overlay-dark: rgba(0,0,0,.55);

    --overlay-light: rgba(255,255,255,.75);

    /* =====================================================
       END
    ===================================================== */

}