/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- editable variables */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/**
 * @info
 * by default, the landingpages project defines the following variables (custom properties)
 * on the `:root` element as the main customization points
 *
 * these variables are set up in the design file of the project
 *
 * any adjustments beyond these variables are considered extra work
 * and are subject to additional charges
 */

:root {
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- colors */

    --lp-color-primary: #b89c0f;
    --lp-color-secondary: #6f665b;

    --lp-color-text-main: #4d4d4d;
    --lp-color-text-complement: #ffffff;

    --lp-color-text-primary: var(--lp-color-primary);
    --lp-color-text-on-primary: var(--lp-color-text-complement);
    --lp-color-background-primary: var(--lp-color-primary);

    --lp-color-text-secondary: var(--lp-color-secondary);
    --lp-color-text-on-secondary: var(--lp-color-text-complement);
    --lp-color-background-secondary: var(--lp-color-secondary);

    --lp-color-text-on-background-complement: var(--lp-color-text-main);
    --lp-color-background-complement: #ffffff;

    --lp-color-text-on-background-1: var(--lp-color-text-main);
    --lp-color-background-1: #eceade;
    --lp-color-text-on-background-2: var(--lp-color-text-main);
    --lp-color-background-2: #ffffff;
    --lp-color-text-on-background-3: var(--lp-color-text-complement);
    --lp-color-background-3: #6f665b;

    --lp-color-text-on-page: var(--lp-color-text-main);
    --lp-color-background-page: #ffffff;

    --lp-color-text-on-navigation: var(--lp-color-text-main);
    --lp-color-background-navigation: rgb(255 255 255 / 85%);

    --lp-color-background-media-placeholder: var(--lp-color-background-1);

    --lp-color-stroke-1: rgb(105 105 105 / 10%);
    --lp-color-stroke-2: rgb(105 105 105 / 20%);
    --lp-color-stroke-3: rgb(105 105 105 / 30%);

    --lp-color-scrollbar-thumb: var(--lp-color-primary);
    --lp-color-scrollbar-track: var(--lp-color-background-1);

    --lp-color-selection-text-primary: var(--lp-color-text-on-primary);
    --lp-color-selection-background-primary: var(--lp-color-background-primary);
    --lp-color-selection-text-secondary: var(--lp-color-text-on-secondary);
    --lp-color-selection-background-secondary: var(
        --lp-color-background-secondary
    );

    --lp-color-outline-focus-primary: var(--lp-color-secondary);
    --lp-color-outline-focus-secondary: var(--lp-color-primary);

    --lp-color-interactive-idle: var(--lp-color-primary);
    --lp-color-interactive-active: var(--lp-color-secondary);

    --lp-color-indicator-text-on-success: var(--lp-color-text-main);
    --lp-color-indicator-success: #04e600;
    --lp-color-indicator-text-on-notice: var(--lp-color-text-complement);
    --lp-color-indicator-notice: #45a2ff;
    --lp-color-indicator-text-on-warning: var(--lp-color-text-main);
    --lp-color-indicator-warning: #ffe345;
    --lp-color-indicator-text-on-error: var(--lp-color-text-complement);
    --lp-color-indicator-error: #ff0000;

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- typography */

    /** @see `/fileadmin/templates/ext/bh_landingpages/assets/fonts/README` */
    --lp-font-family-primary: "Lato", sans-serif;
    --lp-font-family-secondary: "PT Sans", sans-serif;

    --lp-font-style-main: normal;
    --lp-font-style-accent: italic;

    --lp-font-weight-s: 300; /** @info light */
    --lp-font-weight-m: 400; /** @info regular */
    --lp-font-weight-l: 500; /** @info medium */
    --lp-font-weight-xl: 600; /** @info semibold */
    --lp-font-weight-2xl: 700; /** @info bold */
    --lp-font-weight-3xl: 900; /** @info book */

    --lp-font-weight-text-strong: var(--lp-font-weight-2xl);

    /** @link https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=375&minRatio=1.17&maxFontSize=19&maxWidth=1440&maxRatio=1.26&steps=m%2Cl%2Cxl%2C2xl%2C3xl%2C4xl%2C5xl%2C6xl&baseStep=m&prefix=font-size-fluid&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=10&decimals=2&previewFont=Inter&previewText=The+quick+brown+fox+jumps+over+the+lazy+dog&previewWidth=1440 */
    --lp-font-size-fluid-m: clamp(1.8rem, 0.09vi + 1.76rem, 1.9rem);
    --lp-font-size-fluid-l: clamp(2.11rem, 0.27vi + 2rem, 2.39rem);
    --lp-font-size-fluid-xl: clamp(2.46rem, 0.52vi + 2.27rem, 3.02rem);
    --lp-font-size-fluid-2xl: clamp(2.88rem, 0.86vi + 2.56rem, 3.8rem);
    --lp-font-size-fluid-3xl: clamp(3.37rem, 1.33vi + 2.87rem, 4.79rem);
    --lp-font-size-fluid-4xl: clamp(3.95rem, 1.96vi + 3.21rem, 6.03rem);
    --lp-font-size-fluid-5xl: clamp(4.62rem, 2.8vi + 3.57rem, 7.6rem);
    --lp-font-size-fluid-6xl: clamp(5.4rem, 3.92vi + 3.93rem, 9.58rem);

    --lp-font-size-static-xs: 1.2rem;
    --lp-font-size-static-s: 1.3rem;
    --lp-font-size-static-m: 1.5rem;
    --lp-font-size-static-l: 1.6rem;
    --lp-font-size-static-xl: 1.8rem;

    --lp-line-height-s: 0.9;
    --lp-line-height-m: 1;
    --lp-line-height-l: 1.1;
    --lp-line-height-xl: 1.2;
    --lp-line-height-2xl: 1.25;
    --lp-line-height-3xl: 1.4;

    --lp-letter-spacing-m: 0.02em;

    /**
     * @syntax
     * `font-style` (`font-variant`) `font-weight` (`font-width`) `font-size` / `line-height` `font-family`
     */
    --lp-font-text-copy: var(--lp-font-style-main) var(--lp-font-weight-m)
        var(--lp-font-size-static-m) / var(--lp-line-height-3xl)
        var(--lp-font-family-secondary);
    --lp-font-text-teaser: var(--lp-font-style-main) var(--lp-font-weight-m)
        var(--lp-font-size-fluid-m) / var(--lp-line-height-3xl)
        var(--lp-font-family-secondary);
    --lp-font-text-highlight: var(--lp-font-style-main) var(--lp-font-weight-m)
        var(--lp-font-size-fluid-3xl) / var(--lp-line-height-m)
        var(--lp-font-family-primary);
    --lp-font-text-h1: var(--lp-font-style-main) var(--lp-font-weight-2xl)
        var(--lp-font-size-fluid-4xl) / var(--lp-line-height-s)
        var(--lp-font-family-primary);
    --lp-font-text-h2: var(--lp-font-style-main) var(--lp-font-weight-2xl)
        var(--lp-font-size-fluid-3xl) / var(--lp-line-height-m)
        var(--lp-font-family-primary);
    --lp-font-text-h3: var(--lp-font-style-main) var(--lp-font-weight-2xl)
        var(--lp-font-size-fluid-xl) / var(--lp-line-height-m)
        var(--lp-font-family-primary);
    --lp-font-text-h4: var(--lp-font-style-main) var(--lp-font-weight-2xl)
        var(--lp-font-size-fluid-l) / var(--lp-line-height-l)
        var(--lp-font-family-secondary);
    --lp-font-text-h5: var(--lp-font-style-main) var(--lp-font-weight-m)
        var(--lp-font-size-fluid-l) / var(--lp-line-height-xl)
        var(--lp-font-family-secondary);
    --lp-font-text-h6: var(--lp-font-style-main) var(--lp-font-weight-2xl)
        var(--lp-font-size-static-l) / var(--lp-line-height-2xl)
        var(--lp-font-family-primary);
    --lp-font-text-list: var(--lp-font-text-copy);
    --lp-font-text-button: var(--lp-font-style-main) var(--lp-font-weight-2xl)
        var(--lp-font-size-static-l) / var(--lp-line-height-xl)
        var(--lp-font-family-secondary);
    --lp-font-text-label: var(--lp-font-style-main) var(--lp-font-weight-m)
        var(--lp-font-size-static-m) / var(--lp-line-height-xl)
        var(--lp-font-family-secondary);
    --lp-font-text-navigation: var(--lp-font-style-main)
        var(--lp-font-weight-2xl) var(--lp-font-size-static-m) /
        var(--lp-line-height-l) var(--lp-font-family-secondary);
    --lp-font-text-aside-cta: var(--lp-font-text-copy);

    --lp-list-item-spacing: 0.64em;
    --lp-list-item-bullet-spacing: 2ch;
    --lp-list-item-bullet-size: 0.6em;
    --lp-list-item-bullet-align-vertical: 0.4em;
    --lp-list-item-bullet-border-radius: 50%;
    --lp-list-item-icon-spacing: 2ch;
    --lp-list-item-icon-align-vertical: 0.1em;

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- borders */

    --lp-border-radius-s: 0rem;
    --lp-border-radius-m: 0rem;
    --lp-border-radius-l: 0rem;

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- effects */

    --lp-opacity-1: 40%;
    --lp-opacity-2: 70%;
    --lp-opacity-3: 85%;
    --lp-opacity-4: 90%;

    --lp-box-shadow-color: rgb(111 102 91 / 10%);
    --lp-box-shadow-offset-x: 0rem;
    --lp-box-shadow-offset-y: 1rem;
    --lp-box-shadow-blur-radius: 3rem;
    --lp-box-shadow-spread-radius: 0rem;
    --lp-box-shadow-main: var(--lp-box-shadow-offset-x)
        var(--lp-box-shadow-offset-y) var(--lp-box-shadow-blur-radius)
        var(--lp-box-shadow-spread-radius) var(--lp-box-shadow-color);
    --lp-box-shadow-alternate: 0 0 var(--lp-box-shadow-blur-radius)
        var(--lp-box-shadow-spread-radius) var(--lp-box-shadow-color);

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- template */

    --lp-navigation-anchor-logo-width: 3.5rem;

    --lp-footer-logo-width-desktop: 15rem;
    --lp-footer-logo-width-mobile: var(--lp-footer-logo-width-desktop);

    --lp-header-logo-width-desktop: 15rem; /** @info used in conjunction with `--lp-header-navigation-language-width-desktop` */
    --lp-header-logo-width-mobile: 10rem; /** @info used in conjunction with `--lp-header-navigation-language-width-mobile` */
    --lp-header-navigation-language-width-desktop: 13rem; /** @info used in conjunction with `--lp-header-logo-width-desktop` */
    --lp-header-navigation-language-width-mobile: 8rem; /** @info used in conjunction with `--lp-header-logo-width-mobile` */
    --lp-header-badge-text-size-desktop: 6em; /** @info value is set for `badgeMessage` defined in `/fileadmin/templates/ext/bh_landingpages/typoscript/constants.typoscript` */
    --lp-header-badge-text-size-mobile: 6em; /** @info value is set for `badgeMessage` defined in `/fileadmin/templates/ext/bh_landingpages/typoscript/constants.typoscript` */
    --lp-header-badge-image-size-desktop: var(
        --lp-header-badge-text-size-desktop
    );
    --lp-header-badge-image-size-mobile: var(
        --lp-header-badge-text-size-mobile
    );
}