/* 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;
    --contextual-help-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;

    --calendar-coll-event-background-lightness: 95%;
    --calendar-coll-event-background-saturation: 80%;
}

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

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

.use-note-color {
    --custom-color: var(--light-theme-custom-color);
}

span.fancytree-active {
    color: var(--light-theme-custom-color, var(--active-item-text-color));
}
