/* -------------
    Variables
---------------- */

.dark-mode {
    /*----------------
        Quick colors
    ------------------ */

    /* Glasfenster Nacht
    --akzentfarbe: #7a5da8;
    --primärfarbe: #1b1722;
    --sekundärfarbe: #262033;
    --neutralfarbe-1: #211d2a;
    --neutralfarbe-2: #ffffff;*/

    /* Tanne und Holz
    --akzentfarbe: #567C6B;
    --primärfarbe: #18201D;
    --sekundärfarbe: #222E2A;
    --neutralfarbe-1: #1F2925;
    --neutralfarbe-2: #ffffff;*/

    /* Stein und Himmel
    --akzentfarbe: #5C7FA3;
    --primärfarbe: #182228;
    --sekundärfarbe: #223038;
    --neutralfarbe-1: #1F2A30;
    --neutralfarbe-2: #ffffff; */

    /* Herbstlicht
    --akzentfarbe: #C65A2E;
    --primärfarbe: #271a16;
    --sekundärfarbe: #432b23;
    --neutralfarbe-1: #171312;
    --neutralfarbe-2: #ffffff;*/

    /* Kerzenlicht
    --akzentfarbe: #8F6A5E;
    --primärfarbe: #1F1817;
    --sekundärfarbe: #2C201D;
    --neutralfarbe-1: rgb(20, 17, 16);
    --neutralfarbe-2: #ffffff; */

    /* Morgennebel
    --akzentfarbe: #44779c;
    --primärfarbe: #151D23;
    --sekundärfarbe: #1F2A32;
    --neutralfarbe-1: #1D262C;
    --neutralfarbe-2: #ffffff; */

    /* Mein Farbschema */
    --akzentfarbe: #9474c3;
    --primärfarbe: #2f283e;
    --sekundärfarbe: #281e3e;
    --neutralfarbe-1: #110f15;
    --neutralfarbe-2: #f0eff0;

    --transparent: #00000000;

    /* ------------
        Settings
    --------------- */

    /* Links */
    --link-col: var(--akzentfarbe);
    --link-hover-col: color-mix(in oklab, var(--link-col) 70%, var(--neutralfarbe-2));
    --link-active-col: color-mix(in oklab, var(--link-col) 50%, var(--neutralfarbe-2));

    /* Main */
    --bg-main-img: /*url(/assets/img/beautifulPicture.png)*/;
    --bg-main-col: var(--neutralfarbe-1);
    --text-main-col: var(--neutralfarbe-2);
    --heading-col: var(--akzentfarbe);

    --text-start-width: 900px;
    --text-about-width: 1000px;
    --text-gallery-width: 1200px;
    --text-fatima-width: 1000px;
    --text-info-width: 900px;
    --text-privacy-width: 1000px;

    --font-main: "Quicksand", sans-serif;
    --heading-top-margin: 1.7em;

    /* Menu */
    --menu-marked-col: var(--akzentfarbe);
    --menu-hover-col: var(--akzentfarbe);

    --menu-active-col: color-mix(in oklab, var(--menu-hover-col) 80%, var(--neutralfarbe-2));
    --menu-link-hover-col: color-mix(in oklab, var(--menu-hover-col) 80%, var(--neutralfarbe-2));
    --menu-link-active-col: color-mix(in oklab, var(--menu-hover-col) 70%, var(--neutralfarbe-2));

    /* Loading Screen */
    --loading-screen-img: /*url(/assets/img/beautifulPicture.png)*/;
    --loading-screen-col: var(--neutralfarbe-1);

    /* Header */
    --bg-header-col: var(--sekundärfarbe);
    --text-header-col: var(--neutralfarbe-2);
    --theme-toggle-hover-col: var(--akzentfarbe);

    --header-height: 75px;
    --header-padding: 50px;

    /* Footer */
    --bg-footer-col: var(--sekundärfarbe);
    --text-footer-col: color-mix(in oklab, var(--neutralfarbe-2) 70%, var(--bg-footer-col));
    --muted-text-footer-col: color-mix(in oklab, var(--neutralfarbe-2) 60%, var(--bg-footer-col));

    --footer-height: 0.6rem;
    --footer-top-distance: 8rem;

    /* Highlight-Box */
    --highlight-box-bg-col: var(--primärfarbe);
    --highlight-box-text-col: var(--neutralfarbe-2);
    --shadow-highlight-box-col: color-mix(in oklab, var(--highlight-box-bg-col) 90%, var(--neutralfarbe-2));

    /* Info Subpage */
    --oh-bg-col: var(--primärfarbe);
    --oh-text-col: var(--neutralfarbe-2);
    --oh-day-text-col: var(--neutralfarbe-2);
    --shadow-oh-col: color-mix(in oklab, var(--oh-bg-col) 90%, var(--neutralfarbe-2));
    --lines-oh-col: var(--sekundärfarbe);

    --bg-map-col: var(--primärfarbe);
    --shadow-map-col: color-mix(in oklab, var(--bg-map-col) 90%, var(--neutralfarbe-2));

    /* Gallery Subpage */
    --search-bg-col: var(--neutralfarbe-1);
    --search-border-col: var(--sekundärfarbe);
    --search-border-focus-col: var(--akzentfarbe);
    --search-border-focus-glow-col: color-mix(in oklab, var(--akzentfarbe) 80%, var(--neutralfarbe-1));
    --search-border-thickness: 2px;
    --search-text-col: var(--neutralfarbe-2);
    --search-icon-col: var(--akzentfarbe);

    --bg-card-col: var(--neutralfarbe-1);
    --subtext-card-col: var(--neutralfarbe-2);
    --gallery-item-max-height: 330px;
    --gallery-item-border-thickness: 2px;
    --gallery-item-border-col: var(--sekundärfarbe);
    --shadow-card-col: color-mix(in oklab, var(--gallery-item-border-col) 90%, var(--transparent));

    --lightbox-bg-col: color-mix(in oklab, var(--neutralfarbe-2) 90%, var(--transparent));
    --lightbox-button-col: var(--neutralfarbe-1);
    --lightbox-button-hover-col: var(--akzentfarbe);
    --lightbox-button-active-col: color-mix(in oklab, var(--akzentfarbe) 80%, var(--neutralfarbe-2));
    --lightbox-text-col: var(--neutralfarbe-1);

    /* About Subpage (Accordion) */
    --accordion-summary-bg-col: var(--primärfarbe);
    --accordion-text-col: var(--neutralfarbe-2);

    --accordion-heading-col: var(--neutralfarbe-2);
    --accordion-summary-text-col: var(--akzentfarbe);
    --accordion-border-col: var(--sekundärfarbe);
    --accordion-border-thickness: 2px;

    --accordion-bg-col: var(--neutralfarbe-1);
    --accordion-summary-bg-hover-col: color-mix(in oklab, var(--accordion-summary-bg-col) 75%, var(--accordion-border-col));
    --accordion-summary-bg-active-col: color-mix(in oklab, var(--accordion-summary-bg-col) 50%, var(--accordion-border-col));
    
    --accordion-max-width: 800px;

    /* Components */
    --corner-strength: 14px;

    /* Buttons */
    --button-bg-col: var(--sekundärfarbe);
    --button-text-col: var(--neutralfarbe-2);
    --button-hover-bg-col: color-mix(in oklab, var(--button-bg-col) 90%, var(--neutralfarbe-2));
    --button-active-bg-col: color-mix(in oklab, var(--button-bg-col) 80%, var(--neutralfarbe-2));

    --start-button-top-space: 5rem;
}