@media not print {
    :root {
        --ita-colors-neutral-900: #EEEDEB;
        --ita-colors-neutral-800: #BBBAB8;
        --ita-colors-neutral-700: #999896;
        --ita-colors-neutral-600: #797876;
        --ita-colors-neutral-500: #504F4C;
        --ita-colors-neutral-400: #3B3A37;
        --ita-colors-neutral-300: #272624;
        --ita-colors-neutral-200: #131210;
        --ita-colors-neutral-100: #000000;
        --ita-colors-primary-900: #e0dcf8;
        --ita-colors-primary-800: #cdc7f5;
        --ita-colors-primary-700: #b0a8f0;
        --ita-colors-primary-600: #9488ee;
        --ita-colors-primary-500: #7b6de6;
        --ita-colors-primary-400: #2d2278;
        --ita-colors-primary-300: #1e1850;
        --ita-colors-primary-200: #141028;
        --ita-colors-primary-100: #0b0a14;
        --ita-colors-success-900: #daffc5;
        --ita-colors-success-500: #5cab33;
        --ita-colors-success-100: #1a1d18;
        --ita-colors-warning-900: #ffe4bc;
        --ita-colors-warning-500: #EBA232;
        --ita-colors-warning-100: #231d13;
        --ita-colors-danger-900: #ffd1d1;
        --ita-colors-danger-500: #DF3528;
        --ita-colors-danger-100: #251312;
        --libdoc-image-background-color: var(--libdoc-image-background-color-dark-mode) !important;
        --libdoc-soft-shadow: 0px 0px 10px rgba(0,0,0,1);
        --libdoc-long-shadow: 0px 0px 10px 0px var(--ita-colors-neutral-100), 5px 5px 10px 0px var(--ita-colors-primary-100), -5px 5px 10px 0px var(--ita-colors-primary-100), -5px -5px 10px 0px var(--ita-colors-primary-100), 5px -5px 10px 0px var(--ita-colors-primary-100);
        --libdoc-long-shadow-alt: 
            5px 5px 10px 0px var(--ita-colors-primary-100),
            10px 10px 40px 0px var(--ita-colors-primary-500),
            -20px 20px 40px 0px var(--ita-colors-primary-300),
            -20px -20px 40px 0px var(--ita-colors-primary-300),
            20px -20px 40px 0px var(--ita-colors-primary-300),
            5px 5px 10px 0px var(--ita-colors-primary-300),
            -5px 5px 10px 0px var(--ita-colors-primary-300),
            -5px -5px 10px 0px var(--ita-colors-primary-300),
            5px -5px 10px 0px var(--ita-colors-primary-300)
    }
    html {
        background-color: var(--ita-colors-neutral-200);
    }
    body {
        background-color: var(--ita-colors-neutral-200);
        background-image:
            linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
        background-size:
            100% 24px,
            24px 100%,
            100% 48px,
            72px 100%;
    }
    html,
    .o-auto {
        scrollbar-color: var(--ita-colors-neutral-700) transparent;
    }
    main > :not(pre) code {
    background-color: var(--ita-colors-primary-300);
    }
    /* ALERTS */
    main .alert {
    color: var(--ita-colors-neutral-900);
    background-color: var(--ita-colors-neutral-200);
    }
    main .alert.alert-info {
    background-color: var(--ita-colors-primary-200);
    }
    /* TABLES */
    main table td code {
    color: var(--ita-colors-primary-900);
    }
    /* INLINE HTML */
    main del {
    background-color: var(--ita-colors-danger-500);
    color: var(--ita-colors-danger-900);
    text-decoration-color: var(--ita-colors-danger-100);
    }
    main s,
    main strike {
    text-decoration-color: var(--ita-colors-danger-500);
    color: var(--ita-colors-neutral-700);
    }
    main kbd {
    background-color: var(--ita-colors-primary-300);
    }
    main mark {
    background-color: var(--ita-colors-success-500);
    color: var(--ita-colors-success-100);
    }
    main small {
    color: var(--ita-colors-neutral-900);
    }
    main figure {
        background-color: var(--ita-colors-neutral-200);
    }
    main figure.long-shadow img,
    main picture:has(.long-shadow) img {
        box-shadow: 0em 0em 60px var(--ita-colors-neutral-100), 0em 0em 10px var(--ita-colors-neutral-300), 1em 1em 40px var(--ita-colors-neutral-100);
    }
    main > pre {
        background-color: var(--ita-colors-primary-100);
    }
    main > pre > code {
        box-shadow: none;
    }

    /* FLOATING TOC */
    #floating_toc__list a.__active {
        background-color: var(--ita-colors-primary-300);
    }

    /* NAV_PRIMARY */
    #nav_primary_container,
    #nav_primary_header {
        background-color: var(--ita-colors-neutral-200);
    }
    #nav_primary_container {
        box-shadow: var(--libdoc-long-shadow);
    }

    /* SANDBOX */
    .sandbox .sandbox__code_wrapper,
    .sandbox .sandbox__iframe_wrapper {
        background-color: var(--ita-colors-neutral-300);
        color: var(--ita-colors-neutral-800);
    }
    .sandbox .sandbox__resizer {
        background-color: var(--ita-colors-neutral-300);
        color: var(--ita-colors-neutral-800);
    }
    .sandbox .sandbox__resizer:active,
    .sandbox .sandbox__resizer:hover {
        background-color: var(--ita-colors-neutral-400);
    }
    main .sandbox__iframe_wrapper a,
    .sandbox .sandbox__reload,
    .sandbox .sandbox__copy_url,
    .sandbox .sandbox__copy_code {
        color: var(--ita-colors-neutral-900);
    }
    .sandbox .sandbox__enable_switch ~ label {
        background-color: var(--ita-colors-neutral-100);
        color: var(--ita-colors-neutral-900);
    }
    .sandbox .sandbox__tabs {
        background-color: var(--ita-colors-primary-300);
        box-shadow: inset 0px 0px 5px var(--ita-colors-primary-100);
    }
    .sandbox .sandbox__tab.__active {
        background-color: var(--ita-colors-neutral-100);
        box-shadow: var(--libdoc-soft-shadow);
    }

    /* WIDGETS */
    .widget-iconCard > p {
        background-color: var(--ita-colors-neutral-200);
        box-shadow: var(--libdoc-soft-shadow);
    }

    /* BLOG */
    .blog-post-link {
        background-color: var(--ita-colors-neutral-200);
        box-shadow: var(--libdoc-soft-shadow);
    }

    /* AUTOCOMPLETE */
    .auto-results-wrapper > li {
        background-color: var(--ita-colors-primary-100);
    }
}


/* PRINT */
@media print {
    :root {
        --ita-colors-neutral-100: #FFFFFE !important;
        --ita-colors-neutral-200: #F7F6F4 !important;
        --ita-colors-neutral-300: #EEEDEB !important;
        --ita-colors-neutral-400: #E5E4E1 !important;
        --ita-colors-neutral-500: #BFBDBA !important;
        --ita-colors-neutral-600: #999896 !important;
        --ita-colors-neutral-700: #464442 !important;
        --ita-colors-neutral-800: #272624 !important;
        --ita-colors-neutral-900: #000000 !important;
        --ita-colors-primary-100: #fafaff !important;
        --ita-colors-primary-200: #dedaf8 !important;
        --ita-colors-primary-300: #b0a8f0 !important;
        --ita-colors-primary-400: #7b6de6 !important;
        --ita-colors-primary-500: #3a2dba !important;
        --ita-colors-primary-600: #31269e !important;
        --ita-colors-primary-700: #2a1f7e !important;
        --ita-colors-primary-800: #221964 !important;
        --ita-colors-primary-900: #1a1244 !important;
        --ita-colors-success-100: #f2fbec !important;
        --ita-colors-success-500: #5cab33 !important;
        --ita-colors-success-900: #2b650c !important;
        --ita-colors-warning-100: #fff7eb !important;
        --ita-colors-warning-500: #EBA232 !important;
        --ita-colors-warning-900: #87560b !important;
        --ita-colors-danger-100: #fef3f3 !important;
        --ita-colors-danger-500: #DF3528 !important;
        --ita-colors-danger-900: #760e06 !important;
    }
}