/* Varialbes */

:root {
    /* ========================= Light ========================= */
    --light-1: #F6F6FB;
    --light-2: rgb(252, 250, 255);
    --light-3: rgb(236, 237, 239);
    --light-4: rgba(0, 0, 0, 0.1);
    /* ========================= Dark ========================= */
    --dark-1: rgb(3, 7, 18);
    --dark-2: rgb(15, 24, 40);
    --dark-3: rgb(15, 19, 30);
    --dark-4: rgba(0, 0, 0, 0.1);
    /* ========================= Muted ========================= */
    --muted-1: #6C757D;
    --muted-2: rgba(93, 102, 129, 0.2);
    --muted-3: #787878;
    /* ========================= Overlays ========================= */
    --light-transparent: rgba(255, 255, 255, 0.85);
    --dark-transparent: rgba(3, 7, 18, 0.95);
    /* ========================= Brand ========================= */
    --brand-1: #0082ce;
    --brand-1-hover: #0068a4;
    --brand-2: #003261;
    --brand-2-hover: #00274c;
    /* ========================= Custom Colors ========================= */
    --vb-green-1: #00c10a;
    --vb-red-1: #ff1100;
    --brand-gradient-1: linear-gradient(10deg, var(--brand-1), var(--brand-2));
    --success-bg: #eefaf3;
    --success-text: #0b7a45;
}

[data-bs-theme="light"] {
    --bs-body-bg: #fafaff;
    --bs-bg-gradient: linear-gradient(35deg, #d4d8d9, #8ba4f6);
    --bs-bg-gradient-secondary: linear-gradient(35deg, #c3c3c3, #7c8dc9);
    --bs-bg-button-gradient: linear-gradient(35deg, #a498b5, #2849bd);
    --bs-body-bg-secondary: #ffffff;
    --bs-primary: #475569;
    --bs-icon-bg: #a0c3ed;
    --bs-border-color: #e4e4e4;
    --bs-theme-color1: #1b36cf;
    --btn-border: #a97aff;
    --bs-bg-statisticcard: linear-gradient(43deg,rgba(49, 142, 204, 1) 23%, rgba(2, 66, 194, 1) 100%, rgba(56, 100, 194, 1) 78%, rgba(28, 162, 189, 1) 50%);
    --bg-image: url(/img/Authentication/bg-primary-light.jpg);
    --overlay-1: var(--light-transparent);
    --bg-1: var(--light-1);
    --bg-2: var(--light-2);
    --fg-1: var(--dark-1);
    --brand-color-1: var(--brand-1);
    --brand-color-2: var(--brand-2);
    --fg-muted-1: var(--muted-1);
    --border-1: #8181814a;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #121130;
    --bs-bg-gradient: linear-gradient(35deg, #00479F, #001239);
    --bs-bg-gradient-secondary: linear-gradient(35deg, #c3c3c3, #7c8dc9);
    --bs-bg-button-gradient: linear-gradient(35deg, #433457, #0f2267);
    --bs-body-bg-secondary: #1c1d3b;
    --bs-primary: #ffffff;
    --bs-icon-bg: rgb(74, 63, 82);
    --bs-border-color: #282733;
    --bs-theme-color1: #c990d6;
    --btn-border: #813dff;
    --bs-bg-statisticcard: linear-gradient(35deg, #00479F, #001239);
    --bg-image: url(/img/Authentication/bg-primary-light.jpg);
    --overlay-1: var(--dark-transparent);
    --bg-1: var(--dark-1);
    --bg-2: var(--dark-2);
    --fg-1: var(--light-1);
    --brand-color-1: var(--brand-1);
    --brand-color-2: var(--brand-2);
    --fg-muted-1: var(--muted-1);
    --border-1: #8181814a;
}