/* ===========================================================
   AZIEL V2.5 Shared Theme System
   Author : AZIEL
=========================================================== */

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

:root {

    /* Brand */

    --primary: #8b5cf6;
    --primary-hover: #7c3aed;

    /* Background */

    --bg: #f6f7fb;
    --surface: #ffffff;
    --card-bg: rgba(255, 255, 255, .88);

    /* Text */

    --text-color: #111827;
    --text-muted: #6b7280;

    /* Border */

    --border-color: rgba(15, 23, 42, .08);

    /* Inputs */

    --input-bg: rgba(255, 255, 255, .96);

    /* Shadows */

    --shadow-sm:
        0 6px 18px rgba(15, 23, 42, .06);

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

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

    /* Status */

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

}

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

body.dark {

    --bg: #070716;

    --surface: #0d0f22;

    --card-bg:
        rgba(12, 13, 28, .82);

    --text-color: #ffffff;

    --text-muted: #9ca3af;

    --border-color:
        rgba(255, 255, 255, .08);

    --input-bg:
        rgba(255, 255, 255, .04);

    --shadow-sm:
        0 10px 24px rgba(0, 0, 0, .18);

    --shadow-md:
        0 22px 60px rgba(0, 0, 0, .32);

    --shadow-lg:
        0 35px 90px rgba(0, 0, 0, .42);

}

/* ===========================================================
   GLOBAL
=========================================================== */

html {

    color-scheme: light;

}

body.dark {

    color-scheme: dark;

}

body {

    background: var(--bg);

    color: var(--text-color);

    transition:

        background .25s ease,

        color .25s ease;

}

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

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

    color: var(--text-color);

}

p,

small,

label,

span {

    color: var(--text-muted);

}

/* ===========================================================
   FORM
=========================================================== */

input,

textarea,

select {

    background: var(--input-bg);

    color: var(--text-color);

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

}

input::placeholder,

textarea::placeholder {

    color: var(--text-muted);

}

/* ===========================================================
   CARD
=========================================================== */

.card,

.az-card {

    background: var(--card-bg);

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

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

}

/* ===========================================================
   BUTTON
=========================================================== */

.btn-primary {

    background:

        linear-gradient(135deg,
            var(--primary),
            var(--primary-hover));

    color: #fff;

}

.btn-outline {

    background: transparent;

    color: var(--text-color);

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

}

/* ===========================================================
   LINKS
=========================================================== */

a {

    color: inherit;

    text-decoration: none;

}

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

::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-track {

    background: transparent;

}

::-webkit-scrollbar-thumb {

    background: rgba(139, 92, 246, .35);

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: rgba(139, 92, 246, .55);

}

.theme-status-btn {
    cursor: default !important;
    opacity: 1 !important;
}

.theme-status-btn:hover {
    transform: none !important;
}