/* Design tokens */
:root {
  /* Colors */
  --color-background: black;
  --color-text: #e50000;

  /* Typography */
  --font-family: "acumin-variable", sans-serif;

  --font-42-bold: 800 expanded 42px var(--font-family);
  --font-32-bold: 800 expanded 32px var(--font-family);
  --font-32: 400 32px var(--font-family);
  --font-19-bold: 500 19px var(--font-family);
  --font-16-bold: 500 16px var(--font-family);
  --font-16: 400 16px var(--font-family);
  --font-9-bold: 500 9px var(--font-family);

  /* Spacing */
  --padding-mobile: 20px;
  --padding-desktop: 50px;
}

/* CSS Reset for consistent rendering */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Global defaults */
body {
  background-color: var(--color-background);
  font-family: var(--font-family);
  color: var(--color-text);
}

/* Link animation */
.clickable {
  position: relative;
}

.clickable::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5%;
  width: 0;
  height: 15%;
  background-color: var(--color-text);
  transition: width 0.3s ease;
}

.clickable:hover::after {
  width: 100%;
}