:root {
  --bg-light: #f3e4c4;
  --bg-dark: #21120f;
  --text-dark: #0a0a0a;
  --text-light: #f7e8c6;
  --brown: #5a1f1b;
  --brown-strong: #8b3e2f;
  --gold: #c18a3d;
  --gold-soft: #e4c16f;
  --panel-line: rgba(193, 138, 61, 0.4);
  --panel-soft: rgba(139, 62, 47, 0.43);
  --card-tint: rgba(228, 193, 111, 0.3);
  --paper: #f7e8c6;

  --font-display: "Cinzel Decorative", serif;
  --font-accent: "Cinzel", serif;
  --font-heading: "Cormorant Infant", serif;
  --font-nav: "Cormorant Unicase", serif;
  --font-upright: "Cormorant Upright", serif;
  --font-skill-group: "Google Sans Flex", sans-serif;

  --radius-card: 22px;
  --radius-pill: 50px;
  --radius-chip: 10px;
  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-button: 1px 4px 10px rgba(34, 23, 3, 0.7);
  --transition: 220ms ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text-dark);
  font-family: var(--font-heading);
  background: #161a1e;
}

img {
  display: block;
  max-width: 100%;
}

button,
a {
  color: inherit;
}

button {
  font: inherit;
}