/* Based on default theme from typedoc */

@layer shiphenius {
    :root {
        --color-black: #252526;
        --color-white: #fff;
        --color-grey: #888;
        --color-primary: #005e45;
        --color-secondary: #555553;
        --color-warning-base: #D28923;
        --color-danger: #CE0000;
        --color-danger-dark: #FF6060;
        --color-success: #00712D;
        --dark-color-success: #12a84e;
        --color-highlight: #6b0071;
        --dark-color-highlight: #af43b5;
    
    
        --color-primary-grey1: color-mix(in oklab, var(--color-primary) 80%, var(--color-grey));
        --color-primary-grey2: color-mix(in oklab, var(--color-primary) 60%, var(--color-grey));
        --color-primary-grey3: color-mix(in oklab, var(--color-primary) 40%, var(--color-grey));
        --color-primary-grey4: color-mix(in oklab, var(--color-primary) 20%, var(--color-grey));
    
        --color-primary-light1: color-mix(in oklab, var(--color-primary) 80%, var(--color-white));
        --color-primary-light2: color-mix(in oklab, var(--color-primary) 60%, var(--color-white));
        --color-primary-light3: color-mix(in oklab, var(--color-primary) 40%, var(--color-white));
        --color-primary-light4: color-mix(in oklab, var(--color-primary) 20%, var(--color-white));
    
        --color-primary-dark1: color-mix(in oklab, var(--color-primary) 80%, var(--color-black));
        --color-primary-dark2: color-mix(in oklab, var(--color-primary) 60%, var(--color-black));
        --color-primary-dark3: color-mix(in oklab, var(--color-primary) 40%, var(--color-black));
        --color-primary-dark4: color-mix(in oklab, var(--color-primary) 20%, var(--color-black));
    
        --color-secondary-grey1: color-mix(in oklab, var(--color-secondary) 80%, var(--color-grey));
        --color-secondary-grey2: color-mix(in oklab, var(--color-secondary) 60%, var(--color-grey));
        --color-secondary-grey3: color-mix(in oklab, var(--color-secondary) 40%, var(--color-grey));
        --color-secondary-grey4: color-mix(in oklab, var(--color-secondary) 20%, var(--color-grey));
    
        --color-secondary-light1: color-mix(in oklab, var(--color-secondary) 80%, var(--color-white));
        --color-secondary-light2: color-mix(in oklab, var(--color-secondary) 60%, var(--color-white));
        --color-secondary-light3: color-mix(in oklab, var(--color-secondary) 40%, var(--color-white));
        --color-secondary-light4: color-mix(in oklab, var(--color-secondary) 20%, var(--color-white));

        --dark-color-primary: var(--color-primary-light2);

        /* Light */
        --light-color-background: var(--color-white);
        --light-color-background-secondary: var(--color-primary-light3);
        --light-color-warning-text: var(--color-black);
        --light-color-background-warning: var(--color-warning);
        --light-color-accent: var(--color-primary-light4);
        --light-color-active-menu-item: var(--light-color-accent);
        --light-color-text: var(--color-black);
        --light-color-text-aside: var(--color-black);

        --light-color-icon-background: var(--light-color-background);
        --light-color-icon-text: var(--light-color-text);

        --light-color-comment-tag-text: var(--light-color-text);
        --light-color-comment-tag: var(--light-color-background);

        --light-color-link: var(--color-primary);
        --light-color-focus-outline: var(--color-primary-grey1);

        --light-color-alert-note: var(--color-highlight);
        --light-color-alert-tip: var(--color-success);
        --light-color-alert-important: var(--color-highlight);
        --light-color-alert-warning: var(--color-warning-base);
        --light-color-alert-caution: var(--color-danger);

        /* Dark */
        --dark-color-background: var(--color-black);
        --dark-color-background-secondary: var(--color-primary-dark3);
        --dark-color-background-warning: var(--color-warning-base);
        --dark-color-warning-text: var(--color-black);
        --dark-color-accent: var(--color-primary-light1);
        --dark-color-active-menu-item: var(--dark-color-accent);
        --dark-color-text: var(--color-white);
        --dark-color-text-aside: var(--color-white);

        --dark-color-icon-background: var(--dark-color-background-secondary);
        --dark-color-icon-text: var(--dark-color-text);

        --dark-color-comment-tag-text: var(--dark-color-text);
        --dark-color-comment-tag: var(--dark-color-background);

        --dark-color-link: var(--color-primary-light2);
        --dark-color-focus-outline: var(--color-primary-grey1);

        --dark-color-alert-note: var(--dark-color-highlight);
        --dark-color-alert-tip: var(--dark-color-success);
        --dark-color-alert-important: var(--dark-color-highlight);
        --dark-color-alert-warning: var(--color-warning-base);
        --dark-color-alert-caution: var(--color-danger-dark);
    }

    @media (prefers-color-scheme: light) {
        :root {
            --color-header: var(--color-primary);
        }
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-header: var(--dark-color-primary);
        }
    }

    :root[data-theme="light"] {
        --color-header: var(--color-primary);
    }

    :root[data-theme="dark"] {
        --color-header: var(--dark-color-primary);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--color-header);
    }

    * {
        scrollbar-color: unset;
    }

    *::-webkit-scrollbar-track {
        background: unset;
    }

    *::-webkit-scrollbar-thumb {
        background-color: unset;
        border: unset;
    }
}