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

:root {
    /*----------------
        Quick colors
    ------------------ */

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

    /* Tanne und Holz
    --akzentfarbe: #567C6B;
    --primärfarbe: #F1eff5;
    --sekundärfarbe: #e3dfeb;
    --neutralfarbe-1: #ffffff;
    --neutralfarbe-2: #211d2a;*/

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

    /* Herbstlicht
    --akzentfarbe: #C65A2E;
    --primärfarbe: #F5EDE8;
    --sekundärfarbe: #E9D6CC;
    --neutralfarbe-1: #ffffff;
    --neutralfarbe-2: #171312;*/

    /* Kerzenlicht
    --akzentfarbe: #8F6A5E;
    --primärfarbe: #F3EFEF;
    --sekundärfarbe: #E4D8D5;
    --neutralfarbe-1: #ffffff;
    --neutralfarbe-2: #2B2220; */

    /* Morgennebel
    --akzentfarbe: hsl(205, 39%, 44%);
    --primärfarbe: #EEF2F4;
    --sekundärfarbe: #DCE3E8;
    --neutralfarbe-1: #ffffff;
    --neutralfarbe-2: #1D262C;*/

    /* Mein Farbschema */
    
    --akzentfarbe: #BE4D21;
    --primärfarbe: #f5eeea;
    --sekundärfarbe: #e9d3c9;
    --neutralfarbe-1: #ffffff;
    --neutralfarbe-2: #171312;

    --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;
}