/* MARK: root  */

:root {
    /* color & theme */
    /* color-scheme: light dark; */

    /* source ns website: https://tractie.ns.nl/2e23992f3/p/8303aa-typography/b/262702 */
    /* MARK: Colors */
    /* Neutrals */
    --white: #ffffff;
    --black: #000000;

    --gray-25: #F5F5F7;
    --gray-100: #e4e5e8;
    --gray-200: #d6d7dc;
    --gray-300: #c4c5cb;
    --gray-400: #919197;
    --gray-500: #75767C;
    --gray-600: #4D4E51;
    --gray-700: #333438;
    --gray-800: #252528;
    --gray-900: #191a1c;

    /* Brand colors */
    --blue-200: #c4dbf7;
    --blue-300: #9ac5f1;
    --blue-400: #5d9fea;
    --blue-500: #0062d1;
    --blue-600: #0c44a1;
    --blue-700: #0a3680;

    --yellow-400: #fed652;
    --yellow-500: #ffc70f;


    /* Error states */
    --green-300: #4ecda6;
    --green-600: #3E7F67;

    --orange-400: #ff9544;
    --orange-500: #f05c00;

    --red-300: #ff9496;
    --red-500: #ec0045;
    --red-700: #b30525;


    /* Alpha colors */
    --alpha-black-500: rgba(0, 0, 0, 0.55);
    --alpha-white-100: rgba(255, 255, 255, 0.2);
    --alpha-white-500: rgba(255, 255, 255, 0.6);


    /* color tokens */
    /* Content */
    --color-content-default: light-dark(var(--gray-800), var(--gray-300));
    --color-content-default-inverse: light-dark(var(--white), var(--gray-800));
    --color-content-emphasis: light-dark(var(--blue-700), var(--gray-100));
    --color-content-placeholder: light-dark(var(--alpha-black-500), var(--alpha-white-500));

    --color-content-interactive-default: light-dark(var(--blue-500), var(--blue-400));
    --color-content-interactive-default-inverse: light-dark(var(--white), var(--blue-600));
    --color-content-interactive-hover: light-dark(var(--blue-600), var(--blue-300));
    --color-content-interactive-pressed: light-dark(var(--blue-700), var(--blue-200));

    --color-content-input-default: light-dark(var(--gray-300), var(--gray-400));
    --color-content-input-hover: light-dark(var(--gray-500), var(--gray-600));

    --color-content-info: light-dark(var(--blue-500), var(--blue-400));
    --color-content-success: light-dark(var(--green-600), var(--green-300));
    --color-content-warning: light-dark(var(--orange-500), var(--orange-400));
    --color-content-error: light-dark(var(--red-500), var(--red-700));
    --color-content-logo: light-dark(var(--blue-700), var(--yellow-400));

    /* Background */
    --color-background-default: light-dark(var(--white), var(--gray-900));
    --color-background-default-inverse: light-dark(var(--gray-700), var(--gray-200));
    --color-background-selected: light-dark(var(--blue-200), var(--alpha-white-100));
    --color-background-brand-primary: light-dark(var(--yellow-500), var(--gray-800));
    --color-background-brand-secondary: light-dark(var(--blue-700), var(--blue-300));
    --color-background-hover: light-dark(var(--alpha-black-500), var(--alpha-white-100));
    --color-background-input: light-dark(var(--white), var(--black));
    --color-background-elevated-1: light-dark(var(--white), var(--gray-900));
    --color-background-elevated-2: light-dark(var(--white), var(--gray-800));
    --color-background-elevated-sunken: light-dark(var(--gray-25), var(--black));
    --color-background-warning: light-dark(var(--orange-500), var(--orange-400));


    /* shadows */
    --shadow-elevated-1: 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
    --shadow-elevated-2: 0px 8px 20px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.03);

    /* MARK: padding and margin */

    /* border*/

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* border radius */
    --border-radius-s: 0.188rem;
    --border-radius-m: 0.375rem;
    --border-radius-l: 0.75rem;
    --border-radius-full: 100%;

    /* spacing */
    --spacing-spacer-1: 0.25rem;
    --spacing-spacer-2: 0.5rem;
    --spacing-spacer-4: 1rem;
    --spacing-spacer-6: 1.5rem;
    --spacing-spacer-8: 2rem;

    /* padding*/
    /*hier kan ik nog een breakpoint toevoegen maar ga ik nu niet doen*/
    --spacing-inset-xs: var(--spacing-spacer-1);
    --spacing-inset-s: var(--spacing-spacer-2);
    --spacing-inset-m: var(--spacing-spacer-4);
    --spacing-inset-l: var(--spacing-spacer-6);

    /* gap  */
    --spacing-gap-xs: var(--spacing-spacer-1);
    --spacing-gap-s: var(--spacing-spacer-2);
    --spacing-gap-m: var(--spacing-spacer-4);
    --spacing-gap-l: var(--spacing-spacer-6);
    --spacing-gap-xl: var(--spacing-spacer-8);


    /* MARK: typography */
    --typography-size-xxxl: clamp(3rem, 3.3rem + 0.9vi, 5rem);
    /* 28px - 22px */
    ;
    --typography-size-xxl: clamp(1.25rem, 1.0833rem + 0.5556vi, 1.5rem);
    /* 24px - 20px  */
    ;
    --typography-size-xl: clamp(1.125rem, 1.0417rem + 0.2778vi, 1.25rem);
    /* 20px - 18px */
    ;
    --typography-size-l: clamp(1rem, 0.9167rem + 0.2778vi, 1.125rem);
    /* 18px - 16px */
    ;
    --typography-size-m: 1rem;
    /* 16px */
    ;
    --typography-size-s: 0.875rem;
    /* 14px */
    ;
    --typography-size-xs: 0.75rem;
    /* 12px */
    ;

    /* line-heigth */

    --typography-line-height-l: 1.5;
    --typography-line-height-m: 1.25;
    --typography-line-height-s: 1;

    /* weight */
    --typography-weight-normal: 400;
    --typography-weight-medium: 500;
    --typography-weight-bold: 700;
}


/* MARK: Fonts */
/* =========================
   NS Sans
   ========================= */

@font-face {
    font-family: "nsSans";
    src: url("../assets/fonts/nssans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "nsSans";
    src: url("../assets/fonts/nssans-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "nsSans";
    src: url("../assets/fonts/nssans-demi.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "nsSans";
    src: url("../assets/fonts/nssans-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "nsSans";
    src: url("../assets/fonts/nssans-bolditalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
}

/* =========================
   Poppins
   ========================= */

@font-face {
    font-family: "Poppins";
    src: url("../assets/fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* MARK: Basic styling */

/* reset */
*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* list-style-type: none; */
}

/* styling typography */
* {
    font-family: "nsSans", Arial, Helvetica, sans-serif;
    color: var(--color-content-default);
    font-size: var(--typography-size-m);
    line-height: var(--typography-line-height-l);
    padding: var(--spacing-inset-s);
    font-weight: var(--typography-weight-normal);
}

body {
    background: var(--color-background-elevated-sunken);
}

h1 {
    font-size: var(--typography-size-xxxl);
    padding-top: 1em;
    padding-bottom: var(--spacing-inset-l);
    line-height: var(--typography-line-height-m);
    color: var(--color-content-emphasis);
    font-weight: var(--typography-weight-bold);
}

h1::after {
    content: '';
    display: block;
    position: relative;
    width: 15vw;
    height: 4rem;
    top: 3rem;

    /* left: 25%; */
    border-top: var(--border-width-thick) solid var(--color-background-brand-primary);
}

/* h1 @media(1250px >= width) {

  font-size: 4rem;

} */

h2 {
    font-size: var(--typography-size-xxl);
    padding-top: 1em;
    padding-bottom: var(--spacing-inset-xs);
    line-height: var(--typography-line-height-m);
    color: var(--color-content-emphasis);
    font-weight: var(--typography-weight-bold);
}

h3 {
    font-size: var(--typography-size-xl);
    padding-top: 1em;
    padding-bottom: var(--spacing-inset-xs);
    line-height: var(--typography-line-height-m);
    color: var(--color-content-emphasis);
    font-weight: var(--typography-weight-bold);
}

h4 {
    font-size: var(--typography-size-l);
    padding-top: 1em;
    padding-bottom: var(--spacing-inset-xs);
    line-height: var(--typography-line-height-m);
    color: var(--color-content-emphasis);
    font-weight: var(--typography-weight-bold);
}

h5 {
    font-size: var(--typography-size-m);
    padding-top: 1em;
    padding-bottom: var(--spacing-inset-xs);
    line-height: var(--typography-line-height-m);
    color: var(--color-content-emphasis);
    font-weight: var(--typography-weight-bold);
}

h6 {
    font-size: var(--typography-size-s);
    padding-top: 1em;
    padding-bottom: var(--spacing-inset-xs);
    line-height: var(--typography-line-height-m);
    color: var(--color-content-emphasis);
    font-weight: var(--typography-weight-bold);
}

.body-text-l {
    font-size: var(--typography-size-l);
}

.body-text-s {
    font-size: var(--typography-size-s);
}

.body-text-xs {
    font-size: var(--typography-size-xs);
}

/* MARK: other elements */
button {
    /* background-color: var(--color-background-brand-primary); */
    /* color: var(--color-content-emphasis); */
    background-color: var(--color-content-interactive-default);
    color: var(--color-content-default-inverse);
    font-weight: var(--typography-weight-bold);
    font-size: var(--typography-size-l);
    border: none;
    border-radius: var(--border-radius-l);
    padding: var(--spacing-inset-m);
}

button:hover {
    background-color: var(--color-content-interactive-hover);
}

button:active {
    background-color: var(--color-content-interactive-pressed);
}


/* MARK: form */

form {
    box-shadow: var(--shadow-elevated-1);
    background: var(--color-background-elevated-1);
    border: var(--border-width-thin) solid var(--color-background-elevated-sunken);

    border-radius: var(--border-radius-l);
    margin: var(--spacing-inset-l) var(--spacing-inset-m);
}

fieldset {
    border-radius: var(--border-radius-m);
    border: none;

}

form>fieldset {
    background: var(--color-background-elevated-2);
    box-shadow: var(--shadow-elevated-2);
    border: var(--border-width-thin) solid var(--color-background-elevated-sunken);

}


label {
    color: var(--color-content-emphasis);
    font-weight: var(--typography-weight-bold);
    font-size: var(--typography-size-s);

    display: flex;
    flex-direction: column;
}


/* input[type="number"] {
    box-shadow: 8px -1px 0 -6px var(--color-content-input-default), 1px 0 0 var(--color-content-input-default);
} */

input {
    border: solid;
    border-radius: var(--border-radius-m);
    border-width: var(--border-width-thin);
    padding: var(--spacing-inset-xs);
    border-color: var(--color-content-input-default);

    &:hover {
        border-color: var(--color-content-input-hover);
    }

    &:focus {
        outline: none;
        border-color: var(--color-content-interactive-default);
        border-width: var(--border-width-medium);
    }

    &:user-invalid {
        border-color: var(--color-content-error);
        border-width: var(--border-width-medium);
    }

    /* transition: 0.5s; */
}

fieldset:has(> label input[type="radio"]) {
    display: flex;
    gap: var(--spacing-gap-s);
    /* box-shadow: 0 0 0 3px yellow;  */
}

fieldset:has(> label input[type="radio"]) legend {
    color: var(--color-content-emphasis);
    font-weight: var(--typography-weight-bold);
    font-size: var(--typography-size-s);
}

input[type="radio"] {
    box-shadow: 0 0 0 3px yellow;
    justify-content: center;

    opacity: 0;
    position: absolute;
    left: -999rem
}

label:has(input[type="radio"]) {
    /* display: block; */

    color: var(--color-content-default);
    font-size: var(--typography-size-m);
    font-weight: var(--typography-weight-normal);

    border: solid;
    border-radius: var(--border-radius-m);
    border-width: var(--border-width-thin);
    padding: var(--spacing-inset-m);
    border-color: var(--color-content-input-default);

    align-items: center;

    flex-grow: 1;
    max-width: 15rem;

    &:hover {
        border-color: var(--color-content-input-hover);
    }

    &:has(input[type="radio"]:checked) {
        outline: none;
        border-color: var(--color-content-interactive-default);
        border-width: var(--border-width-medium);
    }
}

.errorMessage {
    /* display: none; */
    color: var(--color-content-error);
}

.errorMessage::before {
    /* content: "<svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z"/></svg>"; */
    content: "test";
    /* display: block; */
    /* width: 22px;
        height: 10px; */
    /* margin: 10px 5px 0 10px; */
}

.errorHidden {
    display: none;
}

/* & .errorMessage::before {
        content: "<svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z"/></svg>";
        display: block;
        width: 22px;
        height: 10px;
        margin: 10px 5px 0 10px;
    } */

/* &:has(input:user-invalid) .errorMessage {
        display: block;
    } */


/* fieldset>:has(input[type="radio"]) {
    /* background-color: hotpink;
 } */


fieldset {
    margin: 1rem;
}


.warning {
    font-family: "nsSans";
    font-weight: 400;
    padding: 1rem;
    background-color: red;
    color: white;
}


/* MARK: Progressive disclosure. */

form fieldset.isProgressive fieldset:has(.progressiveRequirement:checked)~* {

    &>* {
        color: var(--color-content-placeholder);
    }

    & label:has(input[type="radio"]) {
        border-width: var(--border-width-thin);
        border-color: var(--color-content-input-default);
    }
}