/*---- Tokens ----*/

:root {
    /* Colors: foreground, border, background, utility */
    --primaryHue: 248;
    --accentHue: 190;
    --dangerHue: 23;
    --warningHue: 88;
    --successHue: 156;
    --neutralHue: 255;

    /* Typography: font-family, font-size, font-weight, line-height */
    --font-family-sans: 'Helvetica Neue', Arial, sans-serif;
    --font-family-serif: 'Georgia', serif;
    --line-height-base: 1.6;
    --font-size-small: 12px;
    --font-size-base: 16px;
    --font-size-large: 24px;
    --font-weight-small: 200;
    --font-weight-base: 400;
    --font-weight-large: 700;

    /* Spacing: margin, padding, gap */
    --margin-small: 8px;
    --margin-medium: 16px;
    --margin-large: 24px;
    --padding-small: 8px;
    --padding-medium: 16px;
    --padding-large: 24px;

    /* Sizing: width, height */
    --width-small: 8px;
    --width-medium: 16px;
    --width-large: 24px;
    --height-small: 8px;
    --height-medium: 16px;
    --height-large: 24px;

    /* Stroke: border radii, stroke width */
    --border-small: 4px;
    --border-medium: 8px;
    --border-large: 16px;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;

    /* Effect: shadow, blur, gradient, etc. */
    --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.16);
    --shadow-large: 0 10px 20px rgba(0, 0, 0, 0.19);
}

/*---- Colors ----*/

:root {
    /* Lightness: 0% = black, 100% = white */
    --lightness100: 96%;
    --lightness200: 87%;
    --lightness300: 77%;
    --lightness400: 68%;
    --lightness500: 58%;
    --lightness600: 49%;
    --lightness700: 40%;
    --lightness800: 30%;
    --lightness900: 21%;

    /* Lightness & chroma */
    --lc100: 97% 0.021;
    --lc200: 88% 0.071;
    --lc300: 78% 0.115;
    --lc400: 69% 0.146;
    --lc500: 59% 0.133;
    --lc600: 46% 0.104;
    --lc700: 35% 0.071;

    /* Primary colors */
    --primary-100: oklch(var(--lc100) var(--primaryHue));
    --primary-200: oklch(var(--lc200) var(--primaryHue));
    --primary-300: oklch(var(--lc300) var(--primaryHue));
    --primary-400: oklch(var(--lc400) var(--primaryHue));
    --primary-500: oklch(var(--lc500) var(--primaryHue));
    --primary-600: oklch(var(--lc600) var(--primaryHue));
    --primary-700: oklch(var(--lc700) var(--primaryHue));

    /* Accent colors */
    --accent-100: oklch(var(--lc100) var(--accentHue));
    --accent-200: oklch(var(--lc200) var(--accentHue));
    --accent-300: oklch(var(--lc300) var(--accentHue));
    --accent-400: oklch(var(--lc400) var(--accentHue));
    --accent-500: oklch(var(--lc500) var(--accentHue));
    --accent-600: oklch(var(--lc600) var(--accentHue));
    --accent-700: oklch(var(--lc700) var(--accentHue));

    /* Danger colors */
    --danger-100: oklch(var(--lc100) var(--dangerHue));
    --danger-200: oklch(var(--lc200) var(--dangerHue));
    --danger-300: oklch(var(--lc300) var(--dangerHue));
    --danger-400: oklch(var(--lc400) var(--dangerHue));
    --danger-500: oklch(var(--lc500) var(--dangerHue));
    --danger-600: oklch(var(--lc600) var(--dangerHue));
    --danger-700: oklch(var(--lc700) var(--dangerHue));

    /* Warning colors */
    --warning-100: oklch(var(--lc100) var(--warningHue));
    --warning-200: oklch(var(--lc200) var(--warningHue));
    --warning-300: oklch(var(--lc300) var(--warningHue));
    --warning-400: oklch(var(--lc400) var(--warningHue));
    --warning-500: oklch(var(--lc500) var(--warningHue));
    --warning-600: oklch(var(--lc600) var(--warningHue));
    --warning-700: oklch(var(--lc700) var(--warningHue));

    /* Neutral colors */
    --neutral50: oklch(98% 0.003 var(--neutralHue));
    --neutral100: oklch(96% 0.003 var(--neutralHue));
    --neutral200: oklch(94% 0.006 var(--neutralHue));
    --neutral300: oklch(91% 0.007 var(--neutralHue));
    --neutral400: oklch(87% 0.008 var(--neutralHue));
    --neutral500: oklch(77% 0.014 var(--neutralHue));
    --neutral600: oklch(64% 0.014 var(--neutralHue));
    --neutral700: oklch(43% 0.016 var(--neutralHue));
    --neutral800: oklch(34% 0.016 var(--neutralHue));
    --neutral900: oklch(26% 0.010 var(--neutralHue));
}
/*---- normalize.css v8.0.1 ----*/

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}


h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}
/*---- Reset some default browser styles ----*/

* {
    box-sizing: border-box;
}

/*---- Basic typography ----*/

body {
    font-family: system-ui;
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

h2 + p, h3 + h4, h3 + ul, h4 + ul {
    margin-top: 0rem;
}

h2:has(+ p), h3:has(+ h4), h3:has(+ ul), h4:has(+ ul) {
    margin-bottom: 0rem;
}

pre {
    white-space: pre-wrap;
}

header,
footer {
    text-align: center;
}

aside, main {
    margin: .5rem;
}

blockquote {
    margin: 0;
    padding: 0 1rem; 
    background-color: var(--background-color-light);
    border-left: 3px solid var(--text-color);
}
/*---- Grid layout ----*/

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body>*>* {
  max-width: 1200px;
  margin: 0 auto;
}

aside, main {
  padding: var(--padding-medium);
}

@media screen and (min-width: 800px) {
  #main-content>div {
    display: flex;
    gap: 2rem;
  }
  
  aside {
    flex: 0 0 300px;
  }

  main {
    flex: 1 1 75%;
  }

}

/*---- Navigation ----*/

nav a {
    color: var(--neutral-100);
    text-decoration: none;
}

nav a:hover {
    color: var(--neutral-200);
    text-decoration: underline;
}

[aria-label=Primary] ul,
[aria-label=Footer] ul {
    flex-direction: row;
    justify-content: space-evenly;
}

nav ul {
    display: flex;
    flex-direction: column;
    padding: 0;
}

nav li {
    list-style-type: none;
}

nav a[aria-current] {
    color: var(--neutral-100);
    font-weight: bold;
}

/*---- Wireframe ----*/

header, aside, footer {
    background-color: var(--neutral-900);
    color: var(--neutral-100);
}

#main-content {
    background-color: var(--neutral-100);
}

main {
    background-color: var(--neutral-400);
}
:root {
    --primary-100: var(--primary100);
    --primary-200: var(--primary200);
    --primary-300: var(--primary300);
    --primary-400: var(--primary400);
    --primary-500: var(--primary500);
    --primary-600: var(--primary600);
    --primary-700: var(--primary700);

    --accent-100: var(--accent100);
    --accent-200: var(--accent200);
    --accent-300: var(--accent300);
    --accent-400: var(--accent400);
    --accent-500: var(--accent500);
    --accent-600: var(--accent600);
    --accent-700: var(--accent700);

    --danger-100: var(--danger100);
    --danger-200: var(--danger200);
    --danger-300: var(--danger300);
    --danger-400: var(--danger400);
    --danger-500: var(--danger500);
    --danger-600: var(--danger600);
    --danger-700: var(--danger700);

    --warning-100: var(--warning100);
    --warning-200: var(--warning200);
    --warning-300: var(--warning300);
    --warning-400: var(--warning400);
    --warning-500: var(--warning500);
    --warning-600: var(--warning600);
    --warning-700: var(--warning700);

    --success-100: var(--success100);
    --success-200: var(--success200);
    --success-300: var(--success300);
    --success-400: var(--success400);
    --success-500: var(--success500);
    --success-600: var(--success600);
    --success-700: var(--success700);

    --neutral-50: var(--neutral50);
    --neutral-100: var(--neutral100);
    --neutral-200: var(--neutral200);
    --neutral-300: var(--neutral300);
    --neutral-400: var(--neutral400);
    --neutral-500: var(--neutral500);
    --neutral-600: var(--neutral600);
    --neutral-700: var(--neutral700);
    --neutral-800: var(--neutral800);
    --neutral-900: var(--neutral900);
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-100: var(--primary200);
        --primary-200: var(--primary300);
        --primary-300: var(--primary400);
        --primary-400: var(--primary500);
        --primary-500: var(--primary400);
        --primary-600: var(--primary500);
        --primary-700: var(--primary600);

        --accent-100: var(--accent200);
        --accent-200: var(--accent300);
        --accent-300: var(--accent400);
        --accent-400: var(--accent500);
        --accent-500: var(--accent400);
        --accent-600: var(--accent500);
        --accent-700: var(--accent600);

        --danger-100: var(--danger200);
        --danger-200: var(--danger300);
        --danger-300: var(--danger400);
        --danger-400: var(--danger500);
        --danger-500: var(--danger400);
        --danger-600: var(--danger500);
        --danger-700: var(--danger600);

        --warning-100: var(--warning200);
        --warning-200: var(--warning300);
        --warning-300: var(--warning400);
        --warning-400: var(--warning500);
        --warning-500: var(--warning400);
        --warning-600: var(--warning500);
        --warning-700: var(--warning600);

        --success-100: var(--success200);
        --success-200: var(--success300);
        --success-300: var(--success400);
        --success-400: var(--success500);
        --success-500: var(--success400);
        --success-600: var(--success500);
        --success-700: var(--success600);

        --neutral-50: var(--neutral900);
        --neutral-100: var(--neutral800);
        --neutral-200: var(--neutral700);
        --neutral-300: var(--neutral600);
        --neutral-400: var(--neutral500);
        --neutral-500: var(--neutral400);
        --neutral-600: var(--neutral300);
        --neutral-700: var(--neutral200);
        --neutral-800: var(--neutral100);
        --neutral-900: var(--neutral50);
    }
}