:root {
    --root-color-primary: #0088cc;
    --root-color-secondary: #ffdb28;

    /* Kalau ubah primary color, primary rgb ini juga diubah ya */
    --root-color-primary-rgb: 0, 136, 204;

    --root-color-primary-oklch: oklch(0.25, 0.221, 50);
    
    --app-color-primary: var(--root-color-primary);
    --app-color-secondary: var(--root-color-secondary);

    /* Kalau ubah primary color, primary rgb ini juga diubah ya */
    --app-color-primary-rgb: 0, 136, 204;

    --app-foreground-primary: var(--root-color-primary);
    --app-foreground-secondary: var(--root-color-secondary);
    --app-foreground-dark: #212529;
    --app-foreground-light: #FFF;

    --app-card-background: #FDFDFD;
    --app-card-border: rgb(229 231 235 / 1);

    --app-scrollbar-color: rgb(0 0 0 / .2);

    body {
        background-color: #F5F5F5;
    }
}

[data-theme="dark"] {
    --app-color-primary: color-mix(in srgb, var(--root-color-primary) 30%, black);
    --app-color-secondary: var(--root-color-secondary);

    /* Kalau ubah primary color, primary rgb ini juga diubah ya, diubah manual tapi, ehe */
    --app-color-primary-rgb: 0, 41, 61;

    --app-foreground-dark: #e6e5e5;
    --app-foreground-light: #D3D3D3;

    --app-card-background: color-mix(in srgb, var(--root-color-primary) 20%, black);
    --app-card-border: rgb(255 255 255 / .3);

    --app-scrollbar-color: rgb(255 255 255 / .3);

    body {
        background-color: color-mix(in srgb, var(--root-color-primary) 20%, black);
    }

    .bg-menu {
        background: color-mix(in srgb, var(--app-color-primary) 50%, white) !important;
    }

    .tentang-batang-menu-item:hover:not(.active) {
        background-color: color-mix(in srgb, var(--root-color-primary), black 20%);
        border: 1px solid var(--root-color-primary);
    }

    .tentang-batang-menu-item.active {
        background-color: color-mix(in srgb, var(--root-color-primary), black 50%);
        border-left: 4px solid var(--root-color-primary);
    }

    .tentang-batang-menu-item.active .tbm-item-description {
        color: var(--app-foreground-light);
    }

    .ttg-mini-menu-item:hover:not(.active) {
        background-color: color-mix(in srgb, var(--root-color-primary), black 20%);
        border: 1px solid var(--root-color-primary);
    }

    .ttg-mini-menu-item.active {
        background-color: color-mix(in srgb, var(--root-color-primary), black 50%);
        border-left: 4px solid var(--root-color-primary);
    }

    .ttg-mini-menu-item.active .tbm-item-description {
        color: var(--app-foreground-light);
    }


    .dokumen-menu-item:not(.active) .dmi-header:hover,
    .dmi-child-item:not(.active):hover {
        background-color: color-mix(in srgb, var(--root-color-primary), black 20%);
    }

    .dokumen-menu-item.active .dmi-header {
        background-color: color-mix(in srgb, var(--root-color-primary), black 50%);
        border-left: 4px solid var(--root-color-primary);
    }

    .dmi-child-item.active {
        background-color: color-mix(in srgb, var(--root-color-primary), black 50%);
    }

    .dokumen-menu-item.active .dokumen-menu-item-description {
        color: var(--app-foreground-light);
    }

    .penjabat-sebelumnya-periode {
        background: color-mix(in srgb, var(--app-color-primary) 50%, white) !important;
    }



    @media (max-width: 576px) {
        .bg-menu {
            --bs-bg-opacity: 1;
            background-color: var(--app-color-primary) !important;
        }
    }

    .footer-image img {
        filter: saturate(30%);
    }

    .cd-header {
        background: var(--app-card-background) !important;
    }
    
    .cnw-news-berita-populer .cnw-news-berita-populer-item:first-child {
        background-color: var(--app-card-background) !important;
    }

    .breadcrumb {
        background-color: color-mix(in srgb, var(--app-color-primary) 90%, white) !important;
    }
}