:root {
  /* https://css-tricks.com/snippets/css/system-font-stack/ */
  --system-sans: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --col-offwhite: rgb(247, 239, 245);
  --col-inky: rgb(33, 0, 62);
  --col-hotpink: rgb(193, 26, 168);
  --col-pink: rgb(239, 189, 200);
  --col-lightpink: rgb(248, 221, 226);
  --col-teal: rgb(40, 103, 97);
  --col-paleblue: rgb(237, 247, 246);
  --col-mint: rgb(212, 238, 209);
  --col-green: rgb(145, 188, 141);
  --col-palepurple: rgb(225, 214, 240);
  --col-rosewhite: rgb(247, 234, 244);
  --col-purple: rgb(201, 115, 250);
  --col-lavender: rgb(153, 141, 188);
  --col-lavendergrey: rgb(56, 58, 192);
  --col-grey: rgb(114, 92, 121);
  --col-lightgrey: rgb(200, 206, 206);
  --col-palegrey: rgb(234, 234, 234);

  --col-link: var(--col-teal);
  --col-link-hover: var(--col-hotpink);
  --col-alert-bg: var(--col-palepurple);
  --col-alert-border: var(--col-purple);
  --col-text-emphasis: var(--col-hotpink);
  --col-emphasis-bg: var(--col-mint);
  --col-emphasis-border: var(--col-green);
  --col-secondary: var(--col-grey);
  --col-secondary-border: var(--col-grey);

  --col-border: var(--col-lightgrey);
  --border-form-elem: 2px solid var(--col-border);
  --spacing-form-elem: 0.25rem 0.5rem;

  --gutter-narrow: 0.5em;
  --gutter-normal: 1em;
  --gutter-wide: 2em;
}

/* BREAD OVERRIDES */
:root {
  --color-text-body: var(--col-inky);
  --color-text-body: var(--col-inky);
  --color-text-emphasis: var(--col-hotpink);
  --color-stroke-emphasis: var(--col-purple);
  --color-stroke-secondary: var(--col-green);
  --color-text-success: var(--col-lavendergrey);
  --color-text-error: hsl(304, 82.3%, 28.8%);
  --color-stroke-error: hsl(300.4, 69.2%, 40.8%);
  --color-bg-error: var(--col-rosewhite);
  --color-text-secondary: hsl(280.3, 42.7%, 36.3%);
  --color-stroke-tertiary: hsl(300, 17.8%, 17.6%);
  --color-bg: var(--col-offwhite);
}

[data-color-mode=high-contrast] {
  --col-inky: black;
  --col-offwhite: white;
  --col-teal: rgb(41, 0, 76);
  --col-hotpink: rgb(197, 2, 93);
  --col-palepurple: rgb(255, 227, 227);
  --col-purple: rgb(218, 43, 92);
  --col-mint: rgb(216, 245, 238);
  --col-lavender: rgb(12, 3, 39);
}

[data-color-mode=low-contrast] {
  --col-inky: rgb(113, 10, 142);
  --col-offwhite: rgb(190, 190, 190);
  --col-teal: rgb(61, 97, 134);
  --col-hotpink: rgb(167, 30, 93);
  --col-pink: rgb(216, 200, 202);
  --col-palepurple: rgb(218, 206, 223);
  --col-purple: rgb(175, 87, 173);
  --col-mint: rgb(209, 215, 221);
  --col-lavender: rgb(158, 131, 177);
  --col-lightgrey: rgb(145, 148, 148);
  --col-palegrey: rgb(211, 209, 209);
}



/*
 * LAYOUT
 */

body {
  margin: 0;
  padding: 0;

  background-color: var(--col-offwhite);
  color: var(--col-inky);
  font-family: var(--system-sans);
  font-size: 18px;
  line-height: 1.5;
}

body > nav {
  display: flex;
  gap: 2ch;
  align-items: center;

  padding: 1em;
  border-bottom: 2px solid var(--col-pink);
}
body > nav > ul {
  display: flex;
  gap: 2ch;
  flex-flow: row;
}
nav h1, nav ul {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
}

.container {
  display: flex;
  flex-flow: row wrap;
  gap: 2em;

  margin: 0 auto 2em;
  width: 150ch;
  max-width: 96%;
}



/*
 * BASE
 */

a:has(h1) {
  text-decoration: none;
}
button, select, input, textarea {
  background-color: var(--off-white);
  padding: var(--spacing-form-elem);
  border: var(--border-form-elem);
  font-size: 1em;
}
button, select {
  cursor: pointer;
}
button {
  font-weight: 800;
}



/*
 * STATE
 */

*:focus {
  border-color: transparent;
  outline: 2px solid #e872d5;
}



/*
 * TYPOGRAPHY
 */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
nav h1 {
  color: var(--col-hotpink);
}
form {
  margin: 0;
}
fieldset {
  display: flex;
  flex-flow: column wrap;
  gap: 1rem;

  border: 2px solid var(--col-lightgrey);
  margin: 0;
}
fieldset > legend {
  font-style: italic;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
}
fieldset > * {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
fieldset label {
  font-weight: 800;
}
a {
  font-weight: 800;
  color: var(--col-link);
  text-decoration: currentcolor underline 2px;
  cursor: pointer;
}
a:hover {
  color: var(--col-link-hover);
  text-decoration-style: dashed;
}
.instruct {
  color: var(--col-secondary);
  font-style: italic;
}
.error {
  color: var(--color-text-error);
  font-weight: 700;
}
.field:has(.error) {
  outline: 2px solid var(--color-stroke-error);
  background: var(--color-bg-error);
}



/*
 * UTILITY
 */

.flex {
  display: flex;
  gap: 1em;
}
.row {
  row-gap: 0.5em;
}
.col {
  flex-direction: column;
  column-gap: 0.5em;
}
.flex > .spacer {
  flex-grow: 1;
}
.spacious {
  padding-top: 2rem;
  padding-bottom: 2rem;
  gap: 2rem;
}