/*CSS RESET START*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end: 0;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap: balance;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/*CSS RESET END*/


:root {
    color-scheme: light;
    /* Colours */
    --color-bg-body: #FFF7ED;
    --color-text-primary: #9A3412;
    --color-bg-button: #9A3412;
    --color-bg-button-hover: #7c2d12;
    --color-text-button: #FDBA74;
    --color-bg-card: #FED7AA;
    --color-bg-text: #F9FAFC;
    --icon-fill: var(--color-bg-button);
    --icon-fill-hover: var(--color-bg-button-hover);
}

body {
    background: var(--color-bg-body);
    color: var(--color-text-primary);
}

.container {
    display: grid;
    justify-content: center;
    margin-top: 3rem;

    /*    align-items: center;*/
    /*    height: 100vh;*/
}

header {
    display: flex;
    justify-content: space-between;
}

label + button, input {
    margin-top: 2rem;
    display: block;
    width: 22rem;
}

input {
    border: none;
    border-radius: 2rem;
    padding: 1rem 2rem;
    background: var(--color-bg-text);
    box-shadow: 4px 6px 4px 2px rgba(0, 0, 0, 0.25), 2px 4px 0px 0px rgba(0, 0, 0, 0.25) inset;
}

label + button {
    background: var(--color-bg-button);
    color: var(--color-text-button);
    border: none;
    border-radius: 2rem;
    box-shadow: 4px 6px 2px 0px rgba(0, 0, 0, 0.25);
    padding: 1rem;
    font-size: 1.5em;
}

label + button:hover {
    background: var(--color-bg-button-hover);
}

label + button:active {
    background: var(--color-bg-button);
}

.result-card {
    margin-top: 3rem;
    text-align: center;
    padding: 2rem;
    border-radius: 2rem;
    background: var(--color-bg-card);
    box-shadow: 2px 6px 4px 4px rgba(0, 0, 0, 0.25);
    outline-offset: 1rem;
}


/*COLOR SCHEMES*/
/*@media (prefers-color-scheme: dark) {*/
/*    :root {*/
/*        color-scheme: dark;*/

/*        --color-bg-body: #4A4E69;*/
/*        --color-text-primary: #FAE8FF;*/
/*        --color-bg-button: #22223B;*/
/*        --color-bg-button-hover: hsl(246.81, 12.5%, 25%);*/
/*        --color-text-button: #FAE8FF;*/
/*        --color-bg-card: #383953;*/
/*        --color-bg-text: #ADADAD;*/
/*        --icon-fill: var(--color-text-button);*/
/*        --icon-fill-hover: #f0abfc;*/
/*    }*/
/*}*/

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg-body: #4A4E69;
    --color-text-primary: #FAE8FF;
    --color-bg-button: #22223B;
    --color-bg-button-hover: hsl(246.81, 12.5%, 25%);
    --color-text-button: #FAE8FF;
    --color-bg-card: #383953;
    --color-bg-text: #ADADAD;
    --icon-fill: var(--color-text-button);
    --icon-fill-hover: #f0abfc;
}

:root[data-theme="light"] {
    color-scheme: light;
    /* Colours */
    --color-bg-body: #FFF7ED;
    --color-text-primary: #9A3412;
    --color-bg-button: #9A3412;
    --color-bg-button-hover: #7c2d12;
    --color-text-button: #FDBA74;
    --color-bg-card: #FED7AA;
    --color-bg-text: #F9FAFC;
    --icon-fill: var(--color-bg-button);
    --icon-fill-hover: var(--color-bg-button-hover);
}