/* ==========================================================
   Atlas Dashboard - Design System
   Variables
========================================================== */

:root {

    /* ===== Brand Colors ===== */


    --primary: #2563EB;
    --primary-light: #60A5FA;
    --primary-dark: #1D4ED8;

    --secondary: #0EA5E9;

    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* ===== Light Theme ===== */

   --background: #F8FAFC;
--surface: #FFFFFF;
--card-bg: #FFFFFF;
--border: #E2E8F0;

    --text: #0F172A;
    --text-light: #64748B;

    /* ===== Sidebar ===== */

    --sidebar-bg: #0F172A;
    --sidebar-text: #E2E8F0;
    --sidebar-active: #0F766E;
    --sidebar-hover: rgba(59,130,246,.12);

    /* ===== Header ===== */

    --header-bg: rgba(255, 255, 255, .85);

    /* ===== Cards ===== */

    --card-bg: #FFFFFF;

    /* ===== Radius ===== */

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 30px;

    /* ===== Shadow ===== */

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

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

    --shadow-lg:
        0 18px 45px rgba(15, 23, 42, .12);

    /* ===== Layout ===== */

    --sidebar-width: 270px;

    --header-height: 72px;

    --container-padding: 28px;

    /* ===== Animation ===== */

    --transition:
        .25s ease;

    /* ===== Fonts ===== */

    --font-en:
        "Inter",
        sans-serif;

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

}


/* ==========================================================
   Dark Theme
========================================================== */

[data-theme="dark"] {

    --background: #08131A;

    --surface: #12212C;

    --surface-hover: #172A37;

    --card-bg: #13232D;

    --header-bg: rgba(19, 35, 45, .9);

    --sidebar-bg: #0F1B24;

    --sidebar-hover: #182A36;

    --sidebar-text: #CBD5E1;

    --sidebar-active: #14B8A6;

    --border: #223443;

    --text: #F8FAFC;

    --text-light: #94A3B8;

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

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

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

}


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

html {

    font-size: 16px;

}

body {

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

    background: var(--background);

    color: var(--text);

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

}

html[lang="ar"] body {

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

}


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

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: transparent;

}

::-webkit-scrollbar-thumb {

    background: #CBD5E1;

    border-radius: 20px;

}

[data-theme="dark"] ::-webkit-scrollbar-thumb {

    background: #304454;

}


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

::selection {

    background: var(--primary);

    color: white;

}


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

a {

    color: inherit;

    text-decoration: none;

}


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

button {

    font-family: inherit;

}


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

input,
textarea,
select {

    font-family: inherit;

}


/* ==========================================================
   Utility Colors
========================================================== */

.text-primary {

    color: var(--primary);

}

.text-success {

    color: var(--success);

}

.text-danger {

    color: var(--danger);

}

.text-warning {

    color: var(--warning);

}

.bg-primary {

    background: var(--primary);

    color: white;

}

.bg-success {

    background: var(--success);

    color: white;

}

.bg-danger {

    background: var(--danger);

    color: white;

}

.bg-warning {

    background: var(--warning);

    color: white;

}