/* Base stylesheet contains only HTML elements & provides default appearance */

:root {
    color-scheme: light dark;
}
html {
    /* sRGB colors */
    --red: hsl(360, 100%, 50%);
    --orange: hsl(39, 100%, 50%);
    --yellow: hsl(60, 100%, 50%);
    --green: hsl(120, 100%, 25%);
    --blue: hsl(240, 100%, 50%);
    --purple: hsl(300, 100%, 25%);
    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);

    /* abstract grays */
    --loud: light-dark(
    var(--black), 
    var(--white)
    );
    --silent: light-dark(
    var(--white), 
    var(--black)
    );
    --hushed: light-dark(
    hsl(from var(--black) h 0% 50%),
    hsl(from var(--black) h 0% 60%)
    );
    --whisper: light-dark(
    hsl(from var(--black) h 0% 80%),
    hsl(from var(--black) h 0% 40%)
    );
    --quiet: light-dark(
    hsl(from var(--black) h 0% 95%),
    hsl(from var(--black) h 0% 20%)
    );

    /* type */
    --sans-serif: 'Helvetica Neue', Inter, Roboto, 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;;
    --default-line-height: 1.5;
    --default-font-size: 18px;
    --smaller-font-size: 85%;
    --bigger-font-size: 120%;
    --light-weight: 200;
    --normal-weight: 400;
    --bold-weight: 600;
    --black-weight: 800;

    /* graphic styles */
    --border-width: 1px;
    --border-radius: 4px;
    --grid: 1rem;
    --transition-speed: 0.2s;
    --transition-timing-function: ease-in-out;
    --transition: all var(--transition-speed) var(--transition-timing-function);

    /* global defaults */
    font-size: var(--default-font-size);
    scroll-behavior: smooth;
}

@media (color-gamut: p3) {
    html {
        /* High gamut colors */
        --red: color(display-p3 1 0 0);
        --orange: color(display-p3 1 0.6 0);
        --yellow: color(display-p3 1 1 0);
        --green: color(display-p3 0.239 0.81 0.066);
        --blue: color(display-p3 0.005 0.005 1);
        --purple: color(display-p3 0.553 0.036 0.589);
    }
}
*:focus, *:focus-visible {
    outline-color: color-mix(in srgb, var(--blue) 40%, transparent);
    outline-style: solid;
    outline-width: 3px;
    outline-offset: 3px;
}
body {
    background: var(--silent);
    color: var(--loud);
    container-type: inline-size;
    font-family: var(--serif);
    line-height: var(--default-line-height);
}
main {
    margin-inline: auto;
    max-width: 50rem;
    padding-inline: 1rem;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sans-serif);
    font-weight: var(--bold-weight);
    small {
        font-weight: var(--light-weight);
    }
}
h1, h2, h3 {
    margin-block-end: var(--grid);
    &:not(:first-of-type) {
        margin-block-start: calc(var(--grid) * 2);
    }
}
h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.5rem;
}
h4, h5, h6 {
    margin-block-end: var(--grid);
    &:not(:first-of-type) {
        margin-block-start: 1rem;
    }
}
h4 {
    font-size: 1rem;
}
h5 {
    font-size: 0.9rem;
}
h6 {
    font-size: 0.8rem;
}

/* block text */
p, blockquote, dl, ol, ul, menu, pre {
    margin-block-end: var(--grid);
}
blockquote {
    background-color: var(--quiet);
    border-radius: var(--border-radius);
    color: var(--hushed);
    font-style: italic;
    font-size: var(--bigger-font-size);
    margin-block: var(--grid);
    padding-block: var(--grid);
    padding-inline: var(--grid);
}
dl, ol, ul, menu {
    --list-indent: calc(var(--grid) * 2);
}
dl {
}
dt {
    font-weight: var(--bold-weight);
}
dd {
    margin-inline-start: var(--list-indent);
    &:not(:last-child) {
        margin-block-end: calc(var(--grid) * 0.5);
    }
}
ol, ul {
    margin-inline-start: var(--list-indent);
}
ul {
    list-style-type: disc;
}
ol {
    list-style-type: decimal;
}
li {
    ol, ul , menu {
        margin-block-end: 0;
    }
}
menu menu {
    margin-inline-start: var(--list-indent);
}
pre {
    font-family: var(--monospace);
    font-size: var(--smaller-font-size);
}
hr {
    border-color: var(--hushed);
    border-style: solid;
    border-width: 0 0 var(--border-width) 0;
    margin-block-start: calc(var(--grid) * 2);
    &:not(:first-child) {
        margin-block-end: calc(var(--grid) * 2);
    }
}

/* inline text */
a {
    text-decoration: underline;
    text-decoration-style: solid;
    transition-duration: var(--transition-speed);
    transition-property: background-color;
    transition-timing-function: var(--transition-timing-function);
    &:link {
        color: var(--blue);
    }
    &:visited {
        color: var(--purple);
    }
    &:hover {
        background-color: color-mix(in srgb, var(--yellow) 20%, transparent);
    }
    &:active {
        background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
    }
}
abbr {
    font-weight: var(--bold-weight);
}
b, strong {
    font-weight: var(--bold-weight);
}
big {
    font-size: var(--bigger-font-size);
}
cite, em, i, q {
    font-style: italic;
}
code, kbd {
    background-color: light-dark(
    color-mix(in srgb, var(--loud) 5%, transparent),
    color-mix(in srgb, var(--loud) 15%, transparent)
    );
    color: var(--hushed);
    font-family: var(--monospace);
    font-size: var(--smaller-font-size);
}
del {
    background-color: light-dark(
    color-mix(in srgb, var(--red) 10%, transparent),
    color-mix(in srgb, var(--red) 20%, transparent)
    );
    color: color-mix(in srgb, var(--red) 70%, var(--loud) 30%);
    text-decoration: line-through;
}
dfn {
    text-decoration: underline dotted;
    text-underline-offset: 0.25em;
}
ins {
    background-color: light-dark(
    color-mix(in srgb, var(--green) 10%, transparent),
    color-mix(in srgb, var(--green) 20%, transparent)
    );
    color: color-mix(in srgb, var(--green) 70%, var(--loud) 30%);
}
kbd {
    border: 1px solid var(--hushed);
    border-radius: var(--border-radius);
    padding: 0.125rem;
}
mark {
    background-color: color-mix(in srgb, var(--yellow) 30%, transparent);
}
ruby {
}
rt {
    font-size: calc(var(--default-font-size) * 0.75);
}
s {
    text-decoration: line-through;
}
samp {
    font-family: var(--monospace);
    font-size: var(--smaller-font-size);
    font-weight: var(--bold-weight);
}
small {
    font-size: var(--smaller-font-size);
}
sub {
    font-size: var(--smaller-font-size);
    vertical-align: sub;
}
sup {
    font-size: var(--smaller-font-size);
    vertical-align: super;
}
time {
    font-weight: var(--bold-weight);
}
u {
    text-decoration: underline;
}
var {
    font-style: italic;
}

/* media */
img {
    display: inline-block;
    height: auto;
    width: auto;
}
figure, video {
    display: block;
    height: auto;
    width: auto;
}
figcaption {
    color: var(--hushed);
    font-family: var(--sans-serif);
}

/* table */
table {
    border: var(--border-width) solid var(--hushed);
    font-family: var(--sans-serif);
    margin-block: var(--grid);
}
tbody {
}
thead, tfoot {
    background-color: var(--quiet);
}
thead {
    border-block-end: var(--border-width) solid var(--whisper);
}
tfoot {
    border-block-start: var(--border-width) solid var(--whisper);
}
td, th {
    padding-block: calc(var(--grid) * 0.25);
    padding-inline: calc(var(--grid) * 0.5);
}
th {
    font-weight: var(--bold-weight);
    &[scope="row"] {
        border-inline-end: var(--border-width) solid var(--hushed);
    }
}
caption {
    color: var(--hushed);
    font-family: var(--sans-serif);
}

/* forms */
form {
}
fieldset {
    background-color: var(--quiet);
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    padding: var(--grid) var(--grid);
    &:not(:last-child) {
        margin-block-end: var(--grid);
    }
}
legend, label, input, select, textarea {
    font-family: var(--sans-serif);
}
legend {
    background-color: transparent;
    font-weight: bold;
    padding-inline: calc(var(--grid) * 0.5);
}
label {
    display: block;
}
/* textish inputs */
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
    background: var(--silent);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding: calc(var(--grid) * 0.25) calc(var(--grid) * 0.5);
    &::placeholder {
        color: var(--whisper);
    }
}
input[type="button"] {
    --base-color: var(--whisper);
    --highlight-color: var(--green);
    --highlight-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-color) 20%, transparent);
    background-color: var(--base-color);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    font-weight: var(--bold-weight);
    padding: calc(var(--grid) * 0.325) calc(var(--grid) * 0.75);
    transition-duration: var(--transition-speed);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--transition-timing-function);
    &:hover {
        background-color: color-mix(in srgb, var(--highlight-color) 10%, var(--base-color));
        border-color: hsl(from var(--highlight-color) h s 10%);
        color: hsl(from var(--highlight-color) h s 10%);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-color) 20%, transparent);
    }
    &:active {
        background-color: color-mix(in srgb, var(--highlight-color) 20%, var(--base-color));
        border-color: hsl(from var(--highlight-color) h s 20%);
        color: hsl(from var(--highlight-color) h s 20%);
        box-shadow: var(--highlight-shadow);
    }
}
form menu li {
    /* for radio and checkbox sets */
    align-items: center;
    column-gap: calc(var(--grid) * 0.5);
    display: flex;
}
input[type="checkbox"], input[type="radio"] {
    background-color: var(--silent);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding: calc(var(--grid) * 0.5);
    transition-duration: var(--transition-speed);
    transition-property: box-shadow;
    transition-timing-function: var(--transition-timing-function);
    &:checked {
        background: var(--hushed);
        border-color: var(--hushed);
        box-shadow: inset 0 0 0 3px var(--silent);
    }
}
input[type="radio"] {
    border-radius: 100%;
}
input[type="color"] {
    background-color: var(--whisper);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding: calc(var(--border-width) * 2);
    height: calc(var(--grid) * 2);
    width: calc(var(--grid) * 2);
}
input[type="file"] {
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    padding: var(--grid) var(--grid);
}
input[type=range] {
    -webkit-appearance: none;
    background-color: var(--quiet);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--grid);
    padding: 2px;
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        background-color: var(--hushed);
        height: var(--grid);
        width: var(--grid);
        border-radius: 100%;
    }
    &::-moz-range-thumb {
        border: none;
        background-color: var(--hushed);
        height: var(--grid);
        width: var(--grid);
        border-radius: 100%;
    }
    &::-ms-thumb {
        width: 100%;
        background: transparent;
        border-color: transparent;
        border-radius: 100%;
        color: transparent;
    }
}
select {
    background-color: var(--quiet);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding-block: 0.25rem;
    padding-inline: 0.5rem 2rem;

    /* arrow */
    /* note hardcoded hex codes */
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg width="16px" height="8px" viewBox="0 0 16 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon id="Path" fill="%23000" points="0 0 8 8 16 0"></polygon></g></svg>');
}
@media (prefers-color-scheme: dark) {
    select {
        background-image: url('data:image/svg+xml,<svg width="16px" height="8px" viewBox="0 0 16 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon id="Path" fill="%23fff" points="0 0 8 8 16 0"></polygon></g></svg>');
    }
}
/* interactive elements */
button { 
    /* intentionally unstyled */
}
map {
    display: block;  
}
details {
    --outer-padding: calc(var(--grid) * 0.5);
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    margin-block-end: var(--grid);
    padding-block-start: var(--outer-padding);
    padding-inline: var(--outer-padding);
    summary {
        background-color: var(--quiet);
        cursor: pointer;
        font-family: var(--sans-serif);
        font-weight: var(--bold-weight);
        padding: var(--outer-padding);
        margin-block-start: calc(var(--outer-padding) * -1);
        margin-inline: calc(var(--outer-padding) * -1);
        transition: margin-block-end 0.2s ease-in-out;
        &:before {
            background-position: center;
            background-repeat: no-repeat;
            content: "";
            display: inline-block;
            height: 16px;
            margin-inline-end: calc(var(--grid) * 0.25);
            width: 16px;
        }
    }
    &[open] summary {
        margin-block-end: var(--grid);
        &:before {
        }
    }
}
/* details/summary arrow */
/* note hardcoded hex codes */
details summary:before {
    background-image: url('data:image/svg+xml,<svg width="8px" height="16px" viewBox="0 0 8 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon id="Path" fill="%23000" points="0 0 0 16 8 8"></polygon></g></svg>');
}
details[open] summary:before {
    background-image: url('data:image/svg+xml,<svg width="16px" height="8px" viewBox="0 0 16 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon id="Path" fill="%23000" points="0 0 8 8 16 0"></polygon></g></svg>');
}
@media (prefers-color-scheme: dark) {
    details summary:before {
        background-image: url('data:image/svg+xml,<svg width="8px" height="16px" viewBox="0 0 8 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon id="Path" fill="%23fff" points="0 0 0 16 8 8"></polygon></g></svg>');
    }
    details[open] summary:before {
        background-image: url('data:image/svg+xml,<svg width="16px" height="8px" viewBox="0 0 16 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon id="Path" fill="%23fff" points="0 0 8 8 16 0"></polygon></g></svg>');
    }
}

/* structural elements */
/* intentionally unstyled */
address, article, aside, div, footer, header, nav, search, section {
    display: block;
    font-family: var(--sans-serif);
}