* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(to top, #020202a7, var(--background-primary)), url('../assets/background.png');
  background-color: var(--background-primary);
  background-size: contain;
  background-position: center;
}

:root {
  --content-primary: #ffffff;
  --content-secondary: #c7c9cc;
  --content-tertiary: #d9d9d9;
  --content-brand: #c58de7;
  --color-inverse: #030203;

  --background-primary: #020202;
  --background-secondary: #111012;
  --background-tertiary: #24222e;
  --background-brand: #c58de7;
  --background-gray: #3d3d3d;

  --accent-pink: #d586e0;
  --accent-blue: #91a1fa;
  --accent-green: #77c0af;
  --accent-lime: #d1dc97;
  --accent-red: #e9a9b3;

  --gradient-border: #77c0af 0%, #d1dc97 14.84%, #e9a9b3 32.15%, #d586e0 65.79%, #91a1fa 84.58%;
  --gradient-background: #d586e0 0%, #91a1fa 98.93%;
  --gradient-content: #c7c9cc 0%, #3d3d3d 100%;

  --font-display: 'Sora', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  --font-body: 'Roboto Flex', sans-serif;

  --display-lg: 72px;
  --display-md: 40px;
  --display-sm: 32px;

  --text-lg: 16px;
  --text-md: 14px;
  --text-sm: 12px;

  --label-md: 20px;
  --label-sm: 16px;

  --lh-tight: 130%;
  --lh-default: 150%;

  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--display-lg);
  line-height: var(--lh-tight);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--display-md);
  line-height: var(--lh-tight);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
}

.display-sm {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.text-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-default);
  font-weight: var(--fw-medium);
}

.text-md {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-default);
  font-weight: var(--fw-medium);
}

.text-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-default);
  font-weight: var(--fw-medium);
}

.label-md {
  font-family: var(--font-body);
  font-size: var(--label-md);
  line-height: var(--lh-default);
  font-weight: var(--fw-bold);
}

.label-sm {
  font-family: var(--font-body);
  font-size: var(--label-sm);
  line-height: var(--lh-default);
  font-weight: var(--fw-bold);
}

.overline {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: var(--lh-default);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}