/* 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/ */

@layer styleguide {

    /* Schrijf hier de verschillende stijlen, die
       gedeeld gaan worden door jullie projecten */
    * {
        box-sizing: border-box;
        scroll-behavior: smooth;
    }

    @font-face {
        font-family: "Stack Sans Headline";
        src: url('./fonts/StackSansHeadline-VariableFont_wght.ttf') format('truetype');
    }

    @font-face {
        font-family: "DM Sans";
        src: url('./fonts/DMSans-VariableFont_wght.ttf') format('truetype');
    }

    :root {
        /* kleuren */
        --primary-color-dark: hsl(141, 36%, 28%);
        --primary-color-lightest: hsl(120, 56%, 81%);
        --primary-color-light: hsl(137, 54%, 81%);
        --secondary-color-lightmode: hsl(44, 98%, 50%);
        --secondary-color-darkmode: hsl(42, 100%, 30%, .5);
        --input-color: hsl(0, 0%, 80%);
        --lightmode-text: hsl(0, 0%, 0%);
        --darkmode-text: hsl(0, 0%, 100%);
        /* radius */
        --button-radius: 0.25rem;

    }

    body {
        line-height: 1.4;
        font-family: "DM Sans", sans-serif;
    }

    /* Typografie */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Stack Sans Headline", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    p,
    a,
    li {
        font-family: "DM Sans", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-size: clamp(1rem, 0.8rem + 1vw, 1.125rem);
    }


    /* Responsive font sizes */
    h1 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    h2 {
        font-size: clamp(1.625rem, 4vw, 2.25rem);
    }

    h3 {
        font-size: clamp(1.375rem, 3vw, 1.75rem);
    }

    h4 {
        font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    }

    h5 {
        font-size: clamp(1rem, 1.5vw, 1.125rem);
    }

    h6 {
        font-size: clamp(0.875rem, 1vw, 1rem);
    }


    /* "lees meer" buttons style */
    .button-lightmode {
        background-color: var(--primary-color-light);
        color: var(--lightmode-text);
        padding: 0.25rem 0.5rem;
        border-radius: var(--lees-meer-link-radius);
        text-decoration: none;
    }

    .button-darkmode {
        background-color: var(--primary-color-light);
        color: var(--lightmode-text);
        padding: 0.25rem 0.5rem;
        border-radius: var(--lees-meer-link-radius);
        text-decoration: none;
    }

    /* Formulier elementen */
}

input,
textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--input-color);
    outline: none;
    border-radius: 12px;
    font-size: 16px;
    outline: 1.5px solid var(--primary-color-dark);
}

textarea {
    height: 200px;
    resize: none;
    margin-bottom: 15px;
}

input:focus {
    border: 2px solid hsl(40, 100%, 80%);
}

textarea:focus {
    border: 2px solid hsl(40, 100%, 80%);
}

.submit-button {
    background: var(--primary-color-dark);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
}