:root{

    /* Layout */

    --header-height:80px;
    --sidebar-width:280px;

    /* Primary */

    --primary:#6C63FF;
    --primary-dark:#5548F5;
    --primary-light:#9088FF;

    /* Secondary */

    --secondary:#00C8FF;

	/* color */

	--white:#FFFFFF;

    /* Accent */

    --accent:#FFD54F;

    /* Status */

    --success:#41C784;
    --warning:#FFA726;
    --error:#FF6B6B;

    /* Background */

    --bg:#F5F7FF;
    --surface:#FFFFFF;

    /* Text */

    --text:#243746;
    --text-light:#7D8CA3;

    /* Border */

    --border:#E6ECF5;

    /* Radius */

   --radius-xs:10px;
   --radius-sm:14px;
   --radius:18px;
   --radius-lg:28px;
   --radius-xl:36px;
   --radius-full:999px;

    /* Shadow */

    --shadow:
        0 10px 30px rgba(34,44,66,.08);

    /* Transition */

    --transition-fast:.15s ease;
    --transition:.25s ease;
    --transition-slow:.4s ease;

    --icon-filter-b:brightness(0);

	 /* Cards */

    --card-radius:28px;
    --card-radius-sm:24px;
    --card-radius-xs:18px;
	--card-bg:var(--surface);
    --card-border:var(--border);
    --card-shadow:
      0 10px 30px rgba(34,44,66,.08);

    /* Banner */

    --banner-height:300px;
    --banner-height-mobile:520px;

    /* Images */
    --image-cover-width:100%;
    --image-cover-height:180px;
    --original-icon-size:40px;
	--sub-icon-size:30px;

    /* Floating */

    --floating-top:100px;
    --floating-left:30px;

    /* Effects */

    --hover-up:-4px;
    --hover-up-lg:-6px;

	 /* Toast */

    --toast-width:280px;
    --toast-padding:15px 20px;
    --toast-radius:16px;
    --toast-gap:12px;

    --toast-top:90px;
    --toast-right:25px;

    --toast-icon-size:28px;

    --toast-shadow:
      0 10px 30px rgba(34,44,66,.15);

	--toast-animation:.35s ease;

	--modal-bg:
    linear-gradient(
    145deg,
    var(--surface),
    var(--bg)
    );

}


/*==================================================
    Theme : Ocean
==================================================*/

html.theme-ocean{

    /* Primary */

    --primary:#2196F3;
    --primary-dark:#1976D2;
    --primary-light:#64B5F6;

    /* Secondary */

    --secondary:#00BCD4;

    /* Accent */

    --accent:#4DD0E1;

    /* Status */

    --success:#26C281;
    --warning:#FFB74D;
    --danger:#EF5350;

    /* Background */

    --bg:#EAF8FF;
    --surface:#FFFFFF;

    /* Text */

    --text:#184A66;
    --text-light:#6C90A6;

    /* Border */

    --border:#CFE8F7;

    /* Shadow */

    --shadow:
        0 10px 30px rgba(33,150,243,.12);

    /* Toast */

    --toast-shadow:
        0 10px 30px rgba(33,150,243,.18);

}


/*==================================================
    Theme : Forest
==================================================*/

html.theme-forest{

    /* Primary */

    --primary:#43A047;
    --primary-dark:#2E7D32;
    --primary-light:#66BB6A;

    /* Secondary */

    --secondary:#8BC34A;

    /* Accent */

    --accent:#C5E1A5;

    /* Status */

    --success:#2E7D32;
    --warning:#FFB74D;
    --error:#EF5350;

    /* Background */

    --bg:#EEF8EE;
    --surface:#FFFFFF;

    /* Text */

    --text:#23452A;
    --text-light:#6F8A72;

    /* Border */

    --border:#D8EFD8;

    /* Shadow */

    --shadow:
        0 10px 30px rgba(67,160,71,.12);

    /* Toast */

    --toast-shadow:
        0 10px 30px rgba(67,160,71,.18);

}


/*==================================================
    Theme : Space
==================================================*/

html.theme-space{

    /* Primary */

    --primary:#7C4DFF;
    --primary-dark:#5E35D6;
    --primary-light:#B388FF;

    /* Secondary */

    --secondary:#00E5FF;

    /* Accent */

    --accent:#FFD54F;

    /* Status */

    --success:#4CAF50;
    --warning:#FFB74D;
    --error:#FF6B6B;

    /* Background */

    --bg:#091320;
    --surface:#132133;

    /* Text */

    --text:#FFFFFF;
    --text-light:#C9D6E8;

    /* Border */

    --border:#24364C;

    /* Shadow */

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

	--icon-filter-b:brightness(0) invert(1);

    /* Toast */

    --toast-shadow:
        0 12px 35px rgba(0,0,0,.55);

}


/*==================================================
    Theme : Magic
==================================================*/

html.theme-magic{

    /* Primary */

    --primary:#9C27B0;
    --primary-dark:#7B1FA2;
    --primary-light:#CE93D8;


    /* Secondary */

    --secondary:#BA68C8;


    /* Accent */

    --accent:#FFD54F;


    /* Status */

    --success:#66BB6A;
    --warning:#FFB74D;
    --error:#EF5350;


    /* Background */

    --bg:#F8F0FF;
    --surface:#FFFFFF;


    /* Text */

    --text:#3E2148;
    --text-light:#8E6B99;


    /* Border */

    --border:#E8D5F0;


    /* Shadow */

    --shadow:
        0 10px 30px rgba(156,39,176,.12);


}


/*==================================================
    Theme : Ice
==================================================*/

html.theme-ice{

    /* Primary */

    --primary:#42A5F5;
    --primary-dark:#1E88E5;
    --primary-light:#90CAF9;


    /* Secondary */

    --secondary:#80DEEA;


    /* Accent */

    --accent:#FFD54F;


    /* Status */

    --success:#4DB6AC;
    --warning:#FFB74D;
    --error:#EF5350;


    /* Background */

    --bg:#F2FCFF;
    --surface:#FFFFFF;


    /* Text */

    --text:#203A4A;
    --text-light:#78909C;


    /* Border */

    --border:#D5EEF5;


    /* Shadow */

    --shadow:
        0 10px 30px rgba(66,165,245,.12);

}

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

    box-sizing:border-box;

}

/*==================================================
    General
==================================================*/

html{

    direction:rtl;

    scroll-behavior:smooth;

}


body{

    margin:0;

    background:var(--bg);

    color:var(--text);

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

    overflow-x:hidden;

    transition:background .3s,color .3s;

}


/*==================================================
    Typography
==================================================*/

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

    margin:0;

    color:var(--text);

    line-height:1.5;

}

p{

    margin:0;

    line-height:1.9;

    color:var(--text-light);

}


/*==================================================
    Links
==================================================*/

a{

    text-decoration:none;

    color:inherit;

}


/*==================================================
    Images
==================================================*/

img{

    display:block;

    max-width:100%;

}


/*==================================================
    Lists
==================================================*/

ul,
ol{

    margin:0;

    padding:0;

    list-style:none;

}


/*==================================================
    Buttons
==================================================*/

button{

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

    cursor:pointer;

    border:none;

    outline:none;

    transition:var(--transition);

}


/*==================================================
    Inputs
==================================================*/

input,
textarea,
select{

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

    outline:none;

    border:none;

}


/*==================================================
    Container
==================================================*/

.container{

    width:min(1400px,94%);

    margin:auto;

}


/*==================================================
    Selection
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*==================================================
    Scrollbar
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:999px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}