@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";
@import "https://unpkg.com/open-props/oklch-hues.min.css";
@import "https://unpkg.com/open-props/palette";

@view-transition { navigation: auto; }

:root {
  --palette-hue: var(--hue-orange);
  --palette-hue-rotate-by: 0;
  --palette-chroma: 0.3;
  --brand: var(--color-5);
  --color-border: var(--surface-3);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

article {
  max-width: 60ch;
  margin: var(--size-4) auto;
  padding: var(--size-3);
  text-align: center;
}

nav {
  display: flex;
  justify-content: center;
  padding: var(--size-3);
}

nav ul {
  display: flex;
  gap: var(--size-1);
  list-style: none;
  padding: var(--size-2);
  margin: 0;
  background: var(--surface-2);
  border-radius: var(--radius-3);
  flex-wrap: wrap;
}

nav a {
  display: block;
  padding: var(--size-2) var(--size-3);
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--radius-2);
  font-size: var(--font-size-1);
  transition: color 0.15s, background 0.15s;
}

nav a:hover,
nav a.active {
  color: var(--brand);
  background: var(--surface-4);
}

button.brand { --_bg: var(--brand); --_border: var(--brand); --_text: var(--surface-1); --_ink-shadow: none; }
button.error { --_accent: var(--red-6); --_border: var(--red-6); }
button.warning { --_accent: var(--yellow-5); --_border: var(--yellow-5); }
button.info { --_accent: var(--blue-6); --_border: var(--blue-6); }
button.success { --_accent: var(--green-6); --_border: var(--green-6); }
button.small { --_size: var(--font-size-0); padding-block: var(--size-1); padding-inline: var(--size-2); }