/* We gebruiken hier Cascade layers, wat mogelijke problemen met Specificiteit voorkomt
   https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
   https://css-tricks.com/css-cascade-layers/ */


@font-face {
  font-family: Amoria;
  src: url('AMORIA.otf');
}

@font-face {
  font-family: Inter;
  src: url('Inter-VariableFont_opsz\,wght.ttf');
}

@layer styleguide {

    :root{
        /* colours */
        --primary-detail-color:#002646; /*heb deze naar hex verandered omdat de hsl net een andere kleur was dan het logo*/
        --secondary-detail-color:hsl(37, 43%, 56%);
        --third-detail-color:hsl(198, 35%, 67%);
        --main-background-color:hsl(0, 0%, 100%);
        --text-color-lightbg:hsl(208, 100%, 10%);
        --text-color-darkbg:hsl(0, 0%, 100%);

        /* fonts */

        --ff-main: "Inter";
        --ff-decorative: "Amoria";

        /* font size */

        --display-large:clamp(3.8rem, -0.825rem + 14.8vw, 7.5rem);
        --display-medium:clamp(2.8rem, -0.325rem + 10vw, 5.3rem);
        --heading-large:clamp(2.3rem, 1.3rem + 3.2vw, 3.1rem);
        --heading-medium:clamp(1.25rem, -0.0625rem + 4.2vw, 2.3rem);
        --heading-small:clamp(1.1rem, 0.6rem + 1.6vw, 1.5rem);
        --body-medium:clamp(1.1rem, 0.9125rem + 0.6vw, 1.25rem);
        --body-small:clamp(1rem, 0.875rem + 0.4vw, 1.1rem);


    }

    /* Schrijf hier de verschillende stijlen, die
       gedeeld gaan worden door jullie projecten */

    body {
        font-family: var(--ff-main);
    }

    /* Kleuren */
    .primary-detail {
        background-color: var(--primary-detail-color);
    }

    .secondary-detail {
        background-color: var(--secondary-detail-color);
    }

    .third-detail {
        background-color: var(--third-detail-color);
    }

    .main-background {
        background-color: var(--main-background-color);
        border: 1px solid;
    }

    .text-lightbg{
        background-color: var(--text-color-lightbg);
    }

    .text-darkbg{
        background-color: var(--text-color-darkbg);
        border: 1px solid;
    }

    /* Typografie */

    .display-large {
        font-family: var(--ff-decorative);
        font-size: var(--display-large);
    }

    .display-medium {
        font-family: var(--ff-decorative);
        font-size: var(--display-medium);
    }

    .header-large {
        font-size: var(--heading-large);
        
    }

    .header-medium {
        font-size: var(--heading-medium);
        font-weight: 400;
    }

    .header-small {
        font-size: var(--heading-small);
        font-weight: 400;
    }

    .body-medium {
        font-size: var(--body-medium);
    }

    .body-small {
        font-size: var(--body-small);
    }

    .label-medium {
        font-size: var(--body-medium);
    }

    .label-small {
        font-size: var(--body-small);
    }

    .quote {
        font-family: var(--ff-decorative);
        font-size: var(--body-medium);
        letter-spacing: 1.5px;
        font-weight: 600;
        font-style: italic;
        
    }

    li {
        list-style-type: "";
        list-style-image: url(star-alt-3-svgrepo-com.svg);
    }

    /* Formulier elementen */
    .text{
        font-family: var(--ff-main);
        font-size: var(--heading-small);

        input{
            font-family: var(--ff-main);
            font-size: var(--body-small);
            background-color: var(--primary-detail-color);
            color: var(--text-color-darkbg);
        }
    }

    .textarea{
        font-family: var(--ff-main);
        font-size: var(--heading-small);

        textarea{
            font-family: var(--ff-main);
            font-size: var(--body-small);
            background-color: var(--primary-detail-color);
            color: var(--text-color-darkbg);
        }
    }

    .search {
        font-family: var(--ff-main);
        font-size: var(--body-small);
        background-color: var(--primary-detail-color);
        color:var(--text-color-darkbg);

        &::placeholder {
            color: var(--text-color-darkbg);
        }

        &::-webkit-search-cancel-button {
            appearance: none;
        }
    }

    .email {
        font-family: var(--ff-main);
        font-size: var(--body-small);
        background-color: var(--primary-detail-color);
        

        input {
            border:unset;
            border-bottom: solid .2em var(--text-color-darkbg);
            color:var(--text-color-darkbg);
        }

        &::placeholder {
            color: var(--text-color-darkbg);
        }
    }

    .range {
        accent-color: var(--primary-detail-color);
    }

    .nav-button {
        text-decoration: none;
        color: var(--text-color-darkbg);
        background-color: var(--text-color-lightbg);
        font-family: var(--ff-main);
        font-size: var(--body-small);

    }

    .button {
        appearance: none;
        background-color: var(--primary-detail-color);
        color:var(--text-color-darkbg);
        border:none;
        border-radius: 2em;
        padding:1em 3em 1em 1em;
        width: fit-content;
        background-image: url("arrow-up-right.svg");
        background-size:1,5em;
        background-repeat:no-repeat;
        background-position: 8.6em .5em;
        font-family: inherit;
        font-size: var(--body-small);
        text-decoration: none;
        
        &:hover {
            cursor:pointer;
            background-color: var(--secondary-detail-color);
            color: var(--text-color-lightbg);
            background-image: url("arrow-up-right-black.svg");
            background-size:1,5em;
            background-repeat:no-repeat;
            background-position: 8.6em .5em;
            
        }

        &:active {
            translate: 0 1px;
        }

    }
}