* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Manrope", sans-serif;
}

:root {
  /* bg */
  --bg-dark: oklch(0.1 0 142);
  --bg: oklch(0.15 0 142);
  --bg-light: oklch(0.2 0 142);
  --gradient: linear-gradient(0deg, var(--bg) 97%, var(--bg-light));
  --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
  /* text */
  --text: oklch(0.96 0 142);
  --text-muted: oklch(0.76 0 142);
  /* border */
  --highlight: oklch(0.5 0 142);
  --border: oklch(0.4 0 142);
  --border-muted: oklch(0.3 0 142);
  --border-card: solid 1px var(--border);
  /* action */
  --primary: oklch(0.76 0.1 142);
  --secondary: oklch(0.76 0.1 322);
  /* alert */
  --danger: oklch(0.7 0.05 30);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.7 0.05 160);
  --info: oklch(0.7 0.05 260);
  /* shadows */
  --shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);
    /* type */
  --ff: "Manrope", sans-serif;
  --h1: 700 1.5rem/1.2em var(--ff);
  --h2: 700 1.25rem/1.2em var(--ff);
  --h3: 700 1.125rem/1.4em var(--ff);
  --h4: 700 1rem/1.6em var(--ff);
  --p: 400 1rem/1.6em var(--ff);
  --small: 400 0.75rem/1.8em var(--ff);
}

body.light {
  --bg-dark: oklch(0.92 0 142);
  --bg: oklch(0.96 0 142);
  --bg-light: oklch(1 0 142);
  --gradient: linear-gradient(0deg, var(--bg) 97%, var(--bg-light));
  --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
  --text: oklch(0.15 0 142);
  --text-muted: oklch(0.4 0 142);
  --highlight: oklch(1 0 142);
  --border: oklch(0.6 0 142);
  --border-muted: oklch(0.7 0 142);
  --primary: oklch(0.4 0.1 142);
  --secondary: oklch(0.4 0.1 322);
  --danger: oklch(0.5 0.05 30);
  --warning: oklch(0.5 0.05 100);
  --success: oklch(0.5 0.05 160);
  --info: oklch(0.5 0.05 260);

  --border-card: solid 1px var(--border);
}

/* utility */
.flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* global */
body {
  margin: 1rem auto;
  max-width: min(90vw, 1200px);
  background: var(--bg-dark);
  color: var(--text-muted);
}

h1 {
  font: var(--h1);
  color: var(--text);
}

h2 {
  font: var(--h2);
  margin-bottom: 0.5rem;
  color: var(--text);
}

h3 {
  font: var(--h3);
  margin-bottom: 0.5rem;
  color: var(--text);
}

h4 {
  font: var(--h4);
  margin-bottom: 0.5rem;
}

p {
  font: var(--p);
}

.small,
small {
  font: var(--small);
}

/*
div {
  background: var(--bg);
  padding: 1.5rem;
  border-radius: 1rem;
  border: var(--border-card);
  border-top: solid 1px var(--highlight);
}

div:hover {
  background: var(--gradient-hover);
}
*/

section {
  display: flex;
  min-height: 100vh;
}

.buttons {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}

button {
  background: var(--bg-light);
  color: var(--text);
  padding: 0.5rem 1rem 0.7rem 1rem;
  border-radius: 0.5rem;
  font: var(--p);
  cursor: pointer;
  box-shadow: var(--shadow);
  border: var(--border-card);
  border-top: solid 1px var(--highlight);
}

button:focus {
  outline: none;
}

button:hover,
.card:hover {
  background: var(--gradient-hover);
}

.primary {
  background: var(--primary);
}

.secondary {
  color: var(--bg-dark);
  background: var(--text);
  border: none;
}

.primary {
  background: var(--primary);
  border: none;
  color: var(--bg-dark);
}

.secondary:hover {
  background: var(--text-muted);
}

.primary:hover {
  background: var(--secondary);
}


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

a:hover {
  color: var(--primary);
}