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

:root {
  color-scheme: light dark;
  --theme-hue: 48.61;
  --text-color: light-dark(#000D, #FFFD);
  --backdrop: light-dark(oklch(0.97 0.015 var(--theme-hue) / 0.75), oklch(0.05 0.03 var(--theme-hue) / 0.25));
  --accent-color-info: oklch(0.632 0.185 275);
  --accent-color-error: oklch(0.615 0.189 25);
  color: var(--text-color);
  font-size: clamp(1rem, -1.5rem + 2vw, 3rem);
}

html {
  padding: 0;
  min-height: 100vh;
}
body {
  background: light-dark(oklch(0.9705 0.0148 var(--theme-hue)), oklch(0.25 0.015 var(--theme-hue)));
  margin: 0;
  min-height: 100%;
  font-family: sans-serif;
}
#root {
  max-width: 70rem;
  margin: 0 auto;
}
html, body, #root {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

h2, h3, h4 {
  margin-bottom: 0;
}

input, select, button {
  font-size: inherit;
}

main {
  flex-grow: 1;
  padding-inline: 1rem;
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1rem;
  > nav {
    margin-left: auto;
  }
}

dialog {
  border-radius: 1rem;
  background: var(--backdrop);
  border: 1px solid var(--text-color);
  box-shadow: 0 1rem 3rem light-dark(var(--text), var(--backdrop));
}

.message {
  &.error {
    --accent-color: var(--accent-color-error);
  }
  padding: 0.5em;
  border: 1px solid var(--accent-color, var(--accent-color-info));
}

form.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 22ch 1fr;
}

.site-footer {
  padding-bottom: 1rem;
  padding-inline: 1rem;
}

table {
  text-align: left;
  min-width: 100%;
}

td, th {
  padding: 0;
}

th {
  vertical-align: baseline;
}

td + td, th + th {
  padding-left: 0.5rem;
}

.input-stretcher {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  > input, > select {
    flex-grow: 1;
  }
}

.input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

/* UTILITIES */
.flex-grow {
  flex-grow: 1;
}