/* Light theme is special since it's also baseline/default so when a theme does not define some variable then
    value from this theme will be used. For this reason this theme uses "html" instead of ":root"
    since it's less "specific" and thus serves as default */
html {
    /* either light or dark, colored theme with darker tones are also dark, used e.g. for note map node colors */
    --theme-style: light;

    --main-font-family: Montserrat, sans-serif;
    --main-font-size: normal;

    --tree-font-family: Montserrat, sans-serif;
    --tree-font-size: normal;

    --detail-font-family: Montserrat, sans-serif;
    --detail-font-size: normal;

    --monospace-font-family: JetBrainsLight, monospace;
    --monospace-font-size: normal;

    --main-background-color: white;
    --main-text-color: black;
    --main-border-color: #ccc;
    --dropdown-border-color: #ccc;
    --dropdown-shadow-opacity: 0.2;
    --dropdown-item-icon-destructive-color: #ec5138;
    --disabled-tooltip-icon-color: #004382;

    --accented-background-color: #f5f5f5;
    --more-accented-background-color: #ddd;

    --button-background-color: transparent;
    --button-border-color: #ddd;
    --button-text-color: black;
    --button-border-radius: 5px;
    --button-disabled-background-color: #ddd;
    --button-disabled-text-color: black;

    --primary-button-background-color: #6c757d;
    --primary-button-text-color: white;
    --primary-button-border-color: #6c757d;

    --muted-text-color: #666;

    --input-text-color: black;
    --input-background-color: transparent;

    --hover-item-text-color: black;
    --hover-item-background-color: transparent;
    --hover-item-border-color: #ccc;

    --active-item-text-color: black;
    --active-item-background-color: #ddd;
    --active-item-border-color: transparent;

    --menu-text-color: black;
    --menu-background-color: white;

    --modal-background-color: white;
    --modal-backdrop-color: black;

    --left-pane-background-color: #f3f3f3;
    --left-pane-text-color: #333;

    --launcher-pane-background-color: #f3f3f3;
    --launcher-pane-text-color: #333;

    --active-tab-background-color: #ddd;
    --active-tab-hover-background-color: #d1d1d1;
    --active-tab-text-color: black;

    --inactive-tab-background-color: #f0f0f0;
    --inactive-tab-hover-background-color: #e3e3e3;
    --inactive-tab-text-color: #666;

    --scrollbar-border-color: #ddd;
    --scrollbar-background-color: #ddd;
    --selection-background-color: #3399FF70;
    --tooltip-background-color: #f8f8f8;
    --link-color: blue;

    --mermaid-theme: default;
    --native-titlebar-background: #ffffff00;
}

#left-pane .fancytree-node.tinted {
    --custom-color: var(--light-theme-custom-color);
}

:root .reference-link,
:root .reference-link:hover,
.ck-content a.reference-link > span,
.board-note {
    color: var(--light-theme-custom-color, inherit);
}