:root {
  --bg-top: #fff5cf;
  --bg-bottom: #ffd8e4;
  --card: rgba(255, 255, 255, 0.9);
  --card-strong: #ffffff;
  --ink: #24425c;
  --muted: #5c7592;
  --accent: #ff8ca1;
  --accent-strong: #f45d7a;
  --gold: #ffb703;
  --sky: #7ed0ff;
  --mint: #96e6a1;
  --line: rgba(36, 66, 92, 0.12);
  --shadow: 0 20px 55px rgba(87, 79, 122, 0.14);
  font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 35%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

button,
input,
select {
  font: inherit;
}