/* ============== DEFAULT ============== */
:root {
    --clr100: #8c84ff; /* light +30 */
    --clr200: #7b72ff; /* light +20 */
    --clr300: #6b61ff; /* light +10 */
    --clr400: #5b50ff; /* default */
    --clr500: #3b2eff; /* dark +10 */
    --clr600: #1c0dfe; /* dark +20 */
    --clr700: #0e00ea; /* dark +30 */

    --primary: var(--clr400);
    --primary-hover: var(--clr500);
    --primary-hover-trans: hsl(from var(--primary) h s l / .1);
    --primary-active: var(--clr600);
    --primary-disabled: var(--clr200);

    --white: #ffffff;
    --black: #212529;

    --putih: #ffffff;
    --hitam: #212529;
    --garis: #e1e1e1;

    --grey: #6A6A6A;
    --soft-grey: #ededed;
    --red: #f44336;
    --green: #4caf50;
    --orange: #ff9800;
    --yellow: #ffeb3b;

    --line: #e1e1e1;
    --tableIndex: #f7f7f7;
    --sidebar: var(--putih);

    --anim: .15s ease;
}

/* ============== DARK MODE ============== */
body.dark {
    --white: #212529 !important;
    --black: #ffffff !important;
    --grey: #aaaaaa !important;
    --soft-grey: #3a3e44 !important;
    --line: #4a4a4a !important;

    --tableIndex: #4a4e54 !important;
    --sidebar: var(--hitam);
}

/* ============== OFFLINE MODE ============== */
body:has(.offline-mode.aktif) {
    --sidebar: #ffe500;
}

/* ============== OFFLINE + DARK MODE ============== */
body.dark:has(.offline-mode.aktif) {
    --sidebar: #ffed51;
}