@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

/* Base styles */
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

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

button:focus-visible {
  outline: 2px solid var(--color-focus) !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

/* Font faces */
@font-face {
  font-family: "PP Watch";
  src: url("/fonts/PPWatch-Extralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Watch";
  src: url("/fonts/PPWatch-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Watch";
  src: url("/fonts/PPWatch-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Watch";
  src: url("/fonts/PPWatch-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Design tokens */
:root {
  /* Colors */
  --color-bg: #0c0c0b;
  --color-border: #3c3b35;
  --color-cream: #f8f3d7;
  --color-cream-50: rgba(248, 243, 215, 0.5);
  --color-muted: #827f71;
  --color-focus: #4a90e2;

  --h1-font-family: "PP Watch", Helvetica;
  --h1-font-size: 70px;
  --h1-font-style: normal;
  --h1-font-weight: 500;
  --h1-letter-spacing: 0px;
  --h1-line-height: 119.00000762939453%;
  --h2-font-family: "PP Watch", Helvetica;
  --h2-font-size: 45px;
  --h2-font-style: normal;
  --h2-font-weight: 500;
  --h2-letter-spacing: 0px;
  --h2-line-height: 119.00000762939453%;
  --h3-font-family: "PP Watch", Helvetica;
  --h3-font-size: 36.63509750366211px;
  --h3-font-style: normal;
  --h3-font-weight: 500;
  --h3-letter-spacing: 0px;
  --h3-line-height: 119.00000762939453%;
  --h4-font-family: "PP Watch", Helvetica;
  --h4-font-size: 32px;
  --h4-font-style: normal;
  --h4-font-weight: 500;
  --h4-letter-spacing: 0px;
  --h4-line-height: 119.00000762939453%;
  --label-font-family: "PP Watch", Helvetica;
  --label-font-size: 14px;
  --label-font-style: normal;
  --label-font-weight: 500;
  --label-large-font-family: "PP Watch", Helvetica;
  --label-large-font-size: 24px;
  --label-large-font-style: normal;
  --label-large-font-weight: 500;
  --label-large-letter-spacing: 0px;
  --label-large-line-height: normal;
  --label-letter-spacing: 0px;
  --label-line-height: normal;
  --p1-font-family: "Azeret Mono", Helvetica;
  --p1-font-size: 13px;
  --p1-font-style: normal;
  --p1-font-weight: 400;
  --p1-letter-spacing: 0px;
  --p1-line-height: 154%;
  --p2-font-family: "Azeret Mono", Helvetica;
  --p2-font-size: 17px;
  --p2-font-style: normal;
  --p2-font-weight: 400;
  --p2-letter-spacing: 0px;
  --p2-line-height: 154%;
  --p3-font-family: "Azeret Mono", Helvetica;
  --p3-font-size: 21px;
  --p3-font-style: normal;
  --p3-font-weight: 400;
  --p3-letter-spacing: 0px;
  --p3-line-height: 154%;
}

@media (max-width: 767px) {
  :root {
    --h4-font-size: 22px;
    --label-large-font-size: 18px;
    --p2-font-size: 15px;
    --p3-font-size: 17px;
  }
}