/*==========================================================
|
|   DAOODY WEBSITE
|   variables.css
|
|   جميع متغيرات المشروع
|
|   إذا أردت تغيير هوية الموقع مستقبلاً
|   عدّل هذا الملف فقط.
|
==========================================================*/



/*==========================================================
                    COLOR PALETTE
==========================================================*/

:root{

    /* Primary */

    --primary:#2E63C5;
    --primary-light:#4D7CE2;
    --primary-dark:#214D9C;

    /* Secondary */

    --secondary:#D62828;
    --secondary-light:#F24848;
    --secondary-dark:#A81818;
--text-secondary:#7A7A7A;
    /* Background */

    --white:#fefefe;

    --off-white:#FCFCFD;

    --light:#F7F9FC;

    --gray-50:#F3F5F8;

    --gray-100:#E7EBF1;

    --gray-200:#D8DEE8;

    --gray-300:#C2CAD6;

    --gray-400:#A6B0BF;

    --gray-500:#7B8697;

    --gray-600:#5B6675;

    --gray-700:#3F4755;

    --gray-800:#2A313C;

    --gray-900:#181D24;

    /* Dark Theme */

    --dark:#151D36;

    --dark-light:#1D2746;

    --dark-card:#222D4F;

    --dark-border:#334066;

    /* Text */

    --text:#222831;

    --text-light:#F8FAFC;

    --text-muted:#8A95A5;

}



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

:root{

    --font-ar:'Tajawal',sans-serif;

    --font-en:'Orbitron',sans-serif;

    --fw-light:300;

    --fw-regular:400;

    --fw-medium:500;

    --fw-semibold:600;

    --fw-bold:700;

    --fw-extrabold:800;

    --fs-xs:.75rem;

    --fs-sm:.875rem;

    --fs-md:1rem;

    --fs-lg:1.125rem;

    --fs-xl:1.25rem;

    --fs-2xl:1.5rem;

    --fs-3xl:2rem;

    --fs-4xl:2.75rem;

    --fs-5xl:3.5rem;

    --fs-hero:4.5rem;

}



/*==========================================================
                        CONTAINER
==========================================================*/

:root{

    --container-xs:540px;

    --container-sm:720px;

    --container-md:960px;

    --container-lg:1140px;

    --container-xl:1280px;

    --container:1280px;

}



/*==========================================================
                        SPACING
==========================================================*/

:root{

    --space-4:4px;

    --space-8:8px;

    --space-12:12px;

    --space-16:16px;

    --space-20:20px;

    --space-24:24px;

    --space-32:32px;

    --space-40:40px;

    --space-48:48px;

    --space-56:56px;

    --space-64:64px;

    --space-72:72px;

    --space-80:80px;

    --space-96:96px;

    --space-120:120px;

}



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

:root{

    --radius-xs:6px;

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:22px;

    --radius-xl:32px;

    --radius-pill:999px;

    --radius-circle:50%;

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

:root{

    --shadow-xs:
    0 2px 6px rgba(0,0,0,.05);

    --shadow-sm:
    0 5px 15px rgba(0,0,0,.08);

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

    --shadow-lg:
    0 18px 45px rgba(0,0,0,.18);

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

}



/*==========================================================
                    GLASS EFFECT
==========================================================*/

:root{

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

    --glass-bg-light:
    rgba(255,255,255,.15);

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

    --glass-blur:18px;

}



/*==========================================================
                    GRADIENTS
==========================================================*/

:root{

    --gradient-primary:
    linear-gradient(
        135deg,
        #2E63C5,
        #4D7CE2
    );

    --gradient-dark:
    linear-gradient(
        135deg,
        #151D36,
        #24345F
    );

    --gradient-red:
    linear-gradient(
        135deg,
        #D62828,
        #FF4D4D
    );

    --gradient-light:
    linear-gradient(
        180deg,
        #FFFFFF,
        #F3F5F8
    );

}



/*==========================================================
                    HEADER
==========================================================*/

:root{

    --header-height:88px;

    --header-scroll:72px;

    --logo-width:190px;

    --nav-gap:36px;

}



/*==========================================================
                    HERO
==========================================================*/

:root{

    --hero-height:100vh;

    --hero-title:4.8rem;

    --hero-subtitle:1.35rem;

    --hero-image-width:540px;

}



/*==========================================================
                    BUTTONS
==========================================================*/

:root{

    --btn-height:56px;

    --btn-padding:

    18px 34px;

    --btn-radius:14px;

}



/*==========================================================
                    CARDS
==========================================================*/

:root{

    --card-radius:24px;

    --card-padding:32px;

    --card-gap:28px;

}



/*==========================================================
                    BORDERS
==========================================================*/

:root{

    --border-light:

    1px solid rgba(0,0,0,.06);

    --border-dark:

    1px solid rgba(255,255,255,.08);

}



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

:root{

    --transition-fast:
    .25s ease;

    --transition:
    .35s ease;

    --transition-slow:
    .55s ease;

}



/*==========================================================
                    ANIMATIONS
==========================================================*/

:root{

    --duration-fast:.3s;

    --duration-normal:.6s;

    --duration-slow:1s;

}



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

:root{

    --z-dropdown:100;

    --z-sticky:500;

    --z-fixed:900;

    --z-modal:1000;

    --z-loader:9999;

}



/*==========================================================
                SECTION SPACING
==========================================================*/

:root{

    --section-space:120px;

    --section-space-mobile:80px;

}



/*==========================================================
                    DARK MODE
==========================================================*/

[data-theme="dark"]{

    --background:
    var(--dark);

    --surface:
    var(--dark-light);

    --surface-card:
    var(--dark-card);

    --border:
    var(--dark-border);

    --heading:
    #FFFFFF;

    --paragraph:
    #D9E0EA;

    --icon:
    #FFFFFF;
--text-secondary:#B8B8B8;
}



/*==========================================================
                    LIGHT MODE
==========================================================*/

[data-theme="light"]{

    --background:
    #FFFFFF;

    --surface:
    #F8FAFC;

    --surface-card:
    #FFFFFF;

    --border:
    rgba(0,0,0,.08);

    --heading:
    #151D36;

    --paragraph:
    #5F6675;

    --icon:
    #2E63C5;

}
/*==========================================================
                    GALLERY
==========================================================*/

:root{

    --gallery-gap:24px;

    --gallery-radius:24px;

    --gallery-image-height:320px;

    --gallery-speed:35s;

}



/*==========================================================
                    PARTNERS
==========================================================*/

:root{

    --partner-height:90px;

    --partner-gap:80px;

    --partner-opacity:.75;

}



/*==========================================================
                    COUNTERS
==========================================================*/

:root{

    --counter-size:3rem;

    --counter-title:1rem;

}



/*==========================================================
                    LOADER
==========================================================*/

:root{

    --loader-size:90px;

    --loader-speed:1.2s;

}



/*==========================================================
                    SCROLL
==========================================================*/

:root{

    --scroll-width:10px;

    --scroll-radius:100px;

}



/*==========================================================
                    OPACITY
==========================================================*/

:root{

    --opacity-low:.15;

    --opacity-medium:.45;

    --opacity-high:.75;

}



/*==========================================================
                    BLUR
==========================================================*/

:root{

    --blur-sm:6px;

    --blur-md:14px;

    --blur-lg:28px;

}



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

:root{

    --mobile:576px;

    --tablet:768px;

    --laptop:992px;

    --desktop:1200px;

    --wide:1440px;

}



/*==========================================================
                    RESET
==========================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

    font-size:16px;

}



body{

    background:var(--background);

    color:var(--paragraph);

    font-family:var(--font-ar);

    line-height:1.7;

    overflow-x:hidden;

    transition:
        background var(--transition),
        color var(--transition);

}



img{

    display:block;

    width:100%;

    height:auto;

}



a{

    text-decoration:none;

    color:inherit;

}



button{

    border:none;

    outline:none;

    cursor:pointer;

    font:inherit;

    background:none;

}



ul{

    list-style:none;

}



input,
textarea{

    font:inherit;

    border:none;

    outline:none;

}



/*==========================================================
                    CONTAINER
==========================================================*/

.container{

    width:min(92%,1280px);

    margin-inline:auto;

}



/*==========================================================
                    SECTION
==========================================================*/

section{

    padding-block:var(--section-space);

}



/*==========================================================
                    HEADINGS
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--heading);

    line-height:1.2;

    font-weight:700;

}



p{

    color:var(--paragraph);

}



/*==========================================================
                    SELECTION
==========================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}



/*==========================================================
                    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:var(--scroll-width);

}



::-webkit-scrollbar-track{

    background:var(--gray-100);

}



::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:var(--scroll-radius);

}



::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}



/*==========================================================
                    FOCUS
==========================================================*/

:focus-visible{

    outline:3px solid var(--secondary);

    outline-offset:3px;

}



/*==========================================================
                    UTILITIES
==========================================================*/

.text-center{

    text-align:center;

}



.hidden{

    display:none!important;

}



.rounded{

    border-radius:var(--card-radius);

}



.shadow{

    box-shadow:var(--shadow-md);

}



.glass{

    background:var(--glass-bg);

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    border:1px solid var(--glass-border);

}



/*==========================================================
                    END OF FILE
==========================================================*/

:root{

--background:#ffffff;
--surface:#f7f9fc;
--heading:#111827;
--paragraph:#4b5563;

}

[data-theme="dark"]{

--background:#0d1117;
--surface:#161b22;
--heading:#ffffff;
--paragraph:#c9d1d9;

}