@import url('https://use.typekit.net/mwj3otv.css');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@function --filter-calc(--h, --s, --l) {
  result:;
}

:root {
  --color-accent-dark: #472861;
  --color-accent-neutral: #472861;
  --color-accent-light: #874e92;
  --color-accent-lighter: #dcc2f1;

  --color-selected: #efc392;
  --color-selected-alt: #e18381;

  --color-highlighted: #b2defb;

  --color-text-main: #f6eefd;
  --color-text-disabled: #dcc2f1;
}

body {
  min-width: 100vw;
  min-height: 100vh;

  padding: 0;
  margin: 0;

  background-color: var(--color-accent-dark);
  color: var(--color-text-main);

  font-family: 'niveau-grotesk', sans-serif;
  font-weight: 400;
  font-style: normal;
}

#app {
  min-width: 100vw;
  min-height: 100vh;

  padding: 0;
  margin: 0;

  background-color: var(--color-accent-dark);

  display: flex;
  flex-direction: column;
}

button {
  background-color: var(--color-accent-light);

  min-width: 32px;
  max-width: 32px;

  border: 0;
  padding: auto;
  border-left: var(--color-accent-dark) 1px solid;
  border-radius: 0;

  color: var(--color-text-main);

  margin: 0;
  font-size: 1em;

  font-family: 'niveau-grotesk', sans-serif;
  font-weight: 400;
  font-style: normal;
}

input {
  background-color: var(--color-accent-light);

  border: var(--color-accent-dark) 2px solid;
  border-radius: 0;

  color: var(--color-text-main);

  padding-left: 8px;

  font-size: 0.7em;

  font-family: 'niveau-grotesk', sans-serif;
  font-weight: 400;
  font-style: normal;
}

input::placeholder {
  color: var(--color-text-disabled);
}

.highlighted {
  border-color: var(--color-text-main) !important;
}