/* Base stylesheet contains only HTML elements & provides default appearance */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
    color-scheme: light dark;
}
html {
    /* ollie colors */
    --hero: light-dark(
        hsl(160deg, 100%, 36%, 100%),
        hsl(160deg, 84%, 56%, 100%)
    );
    --grime: light-dark(
        hsl(106deg, 57%, 88%, 100%),
        hsl(106deg, 26%, 29%, 100%)
    );
    --grunge: light-dark(
        hsl(29deg, 42%, 77%, 100%),
        hsl(29deg, 39%, 19%, 100%)
    );
    --moss: light-dark(
        hsl(86deg, 57%, 45%, 100%),
        hsl(86deg, 57%, 45%, 100%)
    );
    --shag: light-dark(
        hsl(57deg, 43%, 52%, 100%),
        hsl(57deg, 43%, 52%, 100%)
    );
    --glorp: light-dark(
        hsl(44deg, 100%, 39%, 100%),
        hsl(44deg, 75%, 48%, 100%)
    );
    --marooned: light-dark(
        hsl(356deg, 63%, 27%, 100%),
        hsl(356deg, 40%, 49%, 100%)
    );
    --burple: light-dark(
        hsl(273deg, 53%, 35%, 100%),
        hsl(273deg, 57%, 52%, 100%)
    );

    /* abstract colors */
    --success: var(--moss);
    --warning: var(--glorp);
    --highlight: var(--hero);
    --danger: var(--marooned);
    --info: var(--burple);

    /* abstract grays */
    --gray-hue-light: 75deg;
    --gray-hue-dark: 189deg;
    --trueloud: light-dark(
        hsl(0deg, 0%, 0%, 100%),
        hsl(0deg, 0%, 100%, 100%)
    );
    --loud: light-dark(
        hsl(var(--gray-hue-light), 72%, 6%, 100%),
        hsl(var(--gray-hue-dark), 45%, 91%, 100%)
    );
    --hushed: light-dark(
        hsl(var(--gray-hue-light), 10%, 40%, 100%),
        hsl(var(--gray-hue-dark), 10%, 59%, 100%)
    );
    --whisper: light-dark(
        hsl(var(--gray-hue-light), 14%, 71%, 100%),
        hsl(var(--gray-hue-dark), 13%, 28%, 100%)
    );
    --quiet: light-dark(
        hsl(var(--gray-hue-light), 23%, 83%, 100%),
        hsl(var(--gray-hue-dark), 22%, 16%, 100%)
    );
    --silent: light-dark(
        hsl(var(--gray-hue-light), 35%, 95%, 100%),
        hsl(var(--gray-hue-dark), 30%, 8%, 100%)
    );
    --truesilent: light-dark(
        hsl(0deg, 0%, 100%, 100%),
        hsl(0deg, 0%, 0%, 100%)
    );

    /* type */
    --sans-serif: Inter, 'Helvetica Neue', Roboto, 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --monospace: 'IBM Plex Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', ui-monospace, 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: 700;
    --black-weight: 800;

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

    /* breakpoints */
    --bp-sm: 480px;
    --bp-med: 720px;
    --bp-lg: 960px;
    --bp-xl: 1200px;

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

@media (color-gamut: p3) {
    html {
        --hero: light-dark(
            color(display-p3 0.00 0.72 0.48),
            color(display-p3 0.19 0.93 0.68)
        );
        --grime: light-dark(
            color(display-p3 0.84 0.95 0.81),
            color(display-p3 0.25 0.37 0.21)
        );
        --grunge: light-dark(
            color(display-p3 0.87 0.77 0.67),
            color(display-p3 0.26 0.19 0.12)
        );
        --moss: light-dark(
            color(display-p3 0.48 0.71 0.19),
            color(display-p3 0.48 0.71 0.19)
        );
        --shag: light-dark(
            color(display-p3 0.73 0.71 0.31),
            color(display-p3 0.73 0.71 0.31)
        );
        --glorp: light-dark(
            color(display-p3 0.78 0.57 0.00),
            color(display-p3 0.84 0.65 0.12)
        );
        --marooned: light-dark(
            color(display-p3 0.44 0.10 0.12),
            color(display-p3 0.69 0.29 0.32)
        );
        --burple: light-dark(
            color(display-p3 0.37 0.16 0.54),
            color(display-p3 0.55 0.25 0.79)
        );
    }
}
*:focus, *:focus-visible {
    outline-color: color-mix(in srgb, var(--moss) 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(--sans-serif);
    line-height: var(--default-line-height);
    margin-inline: auto;
    max-width: var(--bp-lg);
}
main {
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--monospace);
    font-weight: var(--bold-weight);
    small {
        font-weight: var(--light-weight);
    }
}
h1, h2, h3 {
    margin-block-end: 1rem;
    &:not(:first-of-type) {
        margin-block-start: 2rem;
    }
}
h1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.25rem;
}
h3 {
    font-size: 1.0rem;
}
h4, h5, h6 {
    margin-block-end: 1rem;
    &:not(:first-of-type) {
        margin-block-start: 1rem;
    }
}
h4 {
    font-size: 0.9rem;
}
h5 {
    color: var(--hushed);
    font-size: 0.9rem;
}
h6 {
    color: var(--whisper);
    font-size: 0.8rem;
}

/* block text */
p, blockquote, dl, ol, ul, menu, pre {
    margin-block-end: 1rem;
}
blockquote {
    background-color: var(--quiet);
    border-radius: var(--border-radius);
    color: var(--hushed);
    font-family: var(--monospace);
    font-style: italic;
    margin-block: 1rem;
    padding-block: 1rem;
    padding-inline: 1rem;
}
dl, ol, ul, menu {
    --list-indent: 2rem;
}
dl {
}
dt {
    font-weight: var(--bold-weight);
}
dd {
    margin-inline-start: var(--list-indent);
    &:not(:last-child) {
        margin-block-end: 0.5rem;
    }
}
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: 2rem;
    &:not(:first-child) {
        margin-block-end: 2rem;
    }
}

/* inline text */
a {
    text-decoration: underline;
    text-decoration-style: dotted;
    transition-duration: var(--transition-speed);
    transition-property: background-color;
    transition-timing-function: var(--transition-timing-function);
    &:link {
        color: inherit;
    }
    &:visited {
        color: var(--hushed);
    }
    &:hover {
        background-color: color-mix(in srgb, var(--moss) 25%, transparent);
    }
    &:active {
        background-color: color-mix(in srgb, var(--moss) 60%, transparent);
        color: var(--silent);
    }
}
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(--danger) 10%, transparent),
    color-mix(in srgb, var(--danger) 20%, transparent)
    );
    color: color-mix(in srgb, var(--danger) 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(--success) 10%, transparent),
    color-mix(in srgb, var(--success) 20%, transparent)
    );
    color: color-mix(in srgb, var(--success) 70%, var(--loud) 30%);
}
kbd {
    border: 1px solid var(--hushed);
    border-radius: var(--border-radius);
    padding: 0.125rem;
}
mark {
    /* overloaded in local.css */
    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: 1rem;
}
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: 0.25rem;
    padding-inline: 0.5rem;
}
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: 1rem 1rem;
    &:not(:last-child) {
        margin-block-end: 1rem;
    }
}
legend, label, input, select, textarea {
    font-family: var(--sans-serif);
}
legend {
    background-color: transparent;
    font-weight: bold;
    padding-inline: 0.5rem;
}
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(--truesilent);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding: 0.25rem 0.5rem;
    &::placeholder {
        color: var(--whisper);
    }
}
input[type="button"] {
    --base-color: var(--loud);
    --highlight-color: var(--success);
    --active-color: var(--warning);
    --highlight-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-color) 20%, transparent);
    background-color: var(--base-color);
    border-radius: var(--border-radius);
    color: var(--truesilent);
    font-weight: var(--bold-weight);
    padding: 0.325rem 0.75rem;
    transition-duration: var(--transition-speed);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--transition-timing-function);
    &:hover {
        background-color: var(--highlight-color);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-color) 20%, transparent);
    }
    &:active {
        background-color: var(--active-color);
        box-shadow: var(--highlight-shadow);
    }
}
form menu li {
    /* for radio and checkbox sets */
    align-items: center;
    column-gap: 0.5rem;
    display: flex;
}
input[type="checkbox"], input[type="radio"] {
    background-color: var(--truesilent);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    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(--truesilent);
    }
}
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: 2rem;
    width: 2rem;
}
input[type="file"] {
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    padding: 1rem 1rem;
}
input[type=range] {
    -webkit-appearance: none;
    background-color: var(--quiet);
    border: var(--border-width) solid var(--hushed);
    border-radius: 1rem;
    padding: 2px;
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        background-color: var(--hushed);
        height: 1rem;
        width: 1rem;
        border-radius: 100%;
    }
    &::-moz-range-thumb {
        border: none;
        background-color: var(--hushed);
        height: 1rem;
        width: 1rem;
        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;

    /* chevron arrow via two crossing gradient tiles — inherits currentColor,
       no SVG needed, dark mode works automatically */
    background-repeat: no-repeat, no-repeat;
    background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
    background-position-x: calc(100% - 1rem), calc(100% - 0.625rem);
    background-position-y: 50%, 50%;
    background-image:
        linear-gradient( 45deg, #0000 50%, currentColor 50%, currentColor 66%, #0000 66%),
        linear-gradient(-45deg, #0000 50%, currentColor 50%, currentColor 66%, #0000 66%);
}
/* interactive elements */
button { 
    /* intentionally unstyled */
    &:hover {
        cursor: pointer;
    }
}
map {
    display: block;  
}
details {
    --outer-padding: 0.5rem;
    --chevron-size: 0.5em;
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    margin-block-end: 1rem;
    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 var(--transition-speed) var(--transition-timing-function);
        &:before {
            border-color: currentColor;
            border-style: solid;
            border-width: 0 2px 2px 0;
            content: "";
            display: inline-block;
            height: var(--chevron-size);
            margin-inline-end: 0.5rem;
            transform: rotate(-45deg);
            transition: transform var(--transition-speed) var(--transition-timing-function);
            vertical-align: middle;
            width: var(--chevron-size);
        }
    }
    &[open] summary {
        margin-block-end: 1rem;
        &::before {
            transform: rotate(45deg);
        }
    }
}

/* structural elements */
/* intentionally unstyled */
address, article, aside, div, footer, header, nav, search, section {
    display: block;
}