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

    :root {
        /* Kleuren */
        --background-dark: hsl(201, 71%, 19%);
        --background-light: hsl(168, 38%, 67%);
        /* inset = diepte effect */
        --background-inset: hsl(201, 60%, 25%);
        --text: hsl(0, 0%, 100%);
        --accent: hsl(34, 48%, 84%);
        --accent-light: hsl(34, 60%, 90%);
         --accent-dark:  hsl(0, 0%, 0%);

        /* Typografie */
        --headline: 24px;
        --head: 18px;
        --subhead: 16px;
        --body: 16px;
        --label: 14px;

        --font-family: Geomanist, 'Helvetica Neue', Helvetica, sans-serif;

        /* Spacing */
        --padding: 20px;
        --margin: 10px;
        --button-padding-y: 12px;
        --button-padding-x: 24px;
        --input-padding-y: 12px;
        --input-padding-x: 16px;

        /* Borders */
        --border: 1px solid var(--background-dark);
        --border-radius-default: 8px;
        --border-radius-small: 4px;
        --border-radius-smaller: 2px;
        --border-radius-smallest: 1px;

        /* Shadows */
        --shadow-inset: inset 0 2px 2px hsla(0, 0%, 0%, .1);
        --shadow-small: 0 1px 3px hsla(0, 0%, 0%, .2);
        --shadow-button: inset 0 1px 0 var(--accent-light);
        --focus-border: 0 0 0 2px var(--background-light);

        /* Checkboxes */
        --checkbox-size: 20px;
    
       /* foutmeldingskleur */
       --error-color: hsl(0, 70%, 50%);
    
}

    }




    /* CSS STYLING OP HTML(!) */

    body {
        background-color: var(--background-dark);
        color: var(--text);
        font-family: var(--font-family);
        padding: var(--padding);
    }

    hr {
        border: var(--border-radius-smallest) solid var(--accent);
    }

    /* Kleuren */

    #kleur figure:nth-of-type(1) code {
        background: var(--background-dark);
        color: var(--text);
        border: var(--border-radius-smallest) solid var(--text);
    }

    #kleur figure:nth-of-type(2) code {
        background: var(--background-light);
        color: var(--background-dark);
    }

    #kleur figure:nth-of-type(3) code {
        background: var(--text);
        border: var(--border);
        color: var(--background-dark);
    }

    #kleur figure:nth-of-type(4) code {
        background: var(--accent);
        color: var(--background-dark);
    }

    #kleur figure:nth-of-type(5) code {
        background: var(--accent);
        color: var(--background-dark);
    }

    /* Typografie */

    h1,
    h2,
    h3,
    h4 {
        color: var(--accent);
    }

    .headline h1 {
        font-size: var(--headline);
    }

    .head h2 {
        font-size: var(--head);
    }

    #typografie h3 {
        font-size: var(--subhead);
    }

    #typografie h4,
    #typografie h5,
    .label h6 {
        font-size: var(--label);
    }

    /* Formulier elementen */

    input[type="checkbox"] {
        appearance: none;
        width: var(--checkbox-size);
        height: var(--checkbox-size);
        border: var(--border-radius-smallest) solid var(--text);
        border-radius: var(--border-radius-small);
        background-color: var(--background-dark);
        display: inline-grid;
        place-items: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: var(--shadow-inset);
    }

    input[type="checkbox"]:checked {
        box-shadow: var(--shadow-inset);
    }

    input[type="checkbox"]:checked::after {
        content: "✓";
        color: var(--accent);
        font-size: var(--label);
        font-weight: bold;
    }

    input[type="text"],
    input[type="search"],
    input[type="tel"],
    input[type="email"],
    textarea {
        padding: var(--input-padding-y) var(--input-padding-x);
        background-color: var(--background-inset);
        color: var(--text);
        border: none;
        border-radius: var(--border-radius-default);
        font-family: var(--font-family);
        font-size: var(--label);
        box-shadow: var(--shadow-inset);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--background-light);
    }

    input:focus,
    textarea:focus {
        outline: none;
        box-shadow: var(--shadow-inset), var(--focus-border);
    }

     /* Foutmeldingen*/
    
     label.error-message {
        color: var(--error-color);
        font-size: var(--label);
        margin-top: 4px;
        display: block;
    }


    button,
    input[type="submit"] {
        padding: var(--button-padding-y) var(--button-padding-x);
        background-color: var(--accent);
        color: var(--background-dark);
        border: none;
        border-radius: var(--border-radius-default);
        font-weight: 600;
        font-size: var(--label);
        font-family: var(--font-family);
        cursor: pointer;
        box-shadow: var(--shadow-button), var(--shadow-small);
    }

    button:hover,
    input[type="submit"]:hover {
        background-color: var(--background-light);
        box-shadow: var(--shadow-small);
    }

    button.secondary {
        color: var(--text);
        background-color: var(--background-inset);
        border: 2px solid var(--background-inset);
        box-shadow: none;
    }

    button.secondary:hover {
        text-decoration: underline;
    }

    a {
        color: var(--background-light);
        text-decoration: underline;
    }

    .select-wrap {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 400px;
    }

    select {
        width: 100%;
        max-width: 400px;
        padding: 10px 12px;
        font-size: var(--body);
        border-radius: 6px;
        background-color: var(--accent);
        color: var(--background-dark);
        cursor: pointer;
        appearance: none;
        box-shadow: inset 0 1px 0 var(--accent-light), 0 2.5px 0 var(--background-dark);
        border: var(--border-radius-smaller) solid var(--background-dark);
        font-family: var(--font-family);
    }

    select:focus {
        border-color: var(--background-light);
        box-shadow: inset 0 1px 0 var(--accent-light), 0 2.5px 0 var(--background-dark);
        outline: none;
    }