:root {
  --font-hero: 4rem; /* 64px */
  --weight-hero: 400;

  --font-title: 2.5rem; /* 40px */
  --weight-title: 400;

  --font-subtitle: 1.5rem; /* 30px */
  --weight-subtitle: 500;

  --font-body: 1rem; /* 16px */
  --weight-body: 400;

  --font-small: 0.875rem; /* 14px */
  --weight-small: 500;

  --padding-mobile: 0 20px;
}

:root {
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px; /* for pills / circles */
}

:root {
  --md-sys-color-outline: rgb(115, 119, 127); /* primary border */
  --md-sys-color-outline-variant: rgb(195, 198, 207); /* subtle border */
}

:root {
  --md-sys-color-success: hsl(159, 86%, 63%);
}

.md-hover-layer {
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
}

.md-hover-layer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
  outline: solid 1px var(--md-sys-color-on-surface);
  border-radius: inherit;
  box-sizing: border-box;
}

.md-hover-layer:hover::after {
  opacity: 0.08;
}

.md-hover-layer > * {
  position: relative;
  z-index: 2;
}

:root {
  --md-elevation-level0: none;
  --md-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --md-elevation-level2: 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --md-elevation-level3: 0 4px 8px -2px rgba(0, 0, 0, 0.3);
  --md-elevation-level4: 0 6px 10px -3px rgba(0, 0, 0, 0.3);
  --md-elevation-level5: 0 8px 12px -4px rgba(0, 0, 0, 0.3);
}