@font-face {
  font-family: "Toppiez Bubbly";
  src: url("assets/fonts/toppiez-bubbly.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: light;
  --page-max-width: 1672px;
  --page-gutter: clamp(22px, 4.9vw, 58px);
  --section-gap: clamp(18px, 2.2vw, 36px);
  --section-top-padding: clamp(34px, 4vw, 64px);

  --font-heading: "Toppiez Bubbly", Georgia, serif;
  --font-heading-weight: 300;
  --font-heading-letter-spacing: clamp(-0.07em, -0.07em, -0.07em);
  --font-title: var(--font-text);
  --font-text: "Avenir Next", Avenir, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ink: #08090b;
  /*--hot: #E85E89;*/
  --hot: #DA3261;
  --hot: #EA3972;
  --page-background: #fbf2f3;

  --hot-hover: color-mix(in srgb, var(--hot) 86%, white);
  --muted: #41444c;
  --pink-wash: #fff0f6;
  --line: #ffd7dd;
  --color-border: #e6e6e6;
  --soft: #fbfbfc;
  --success: #008c45;

  --orange: #f06a00;
  --background-sides: #f5f5f5;
  --blue: #aee1ff;
  --gold: #f6a100;
  --shadow: 0 16px 36px rgb(105 40 56 / 12%);
  --hero-copy-shadow: rgb(255 255 255 / 100%);
  --hero-copy-thin-shadow: rgb(255 255 255 / 100%);
}

@media (max-width: 620px) {
  :root {
    --page-gutter: clamp(18px, 5.4vw, 28px);
    --section-gap: clamp(16px, 5vw, 28px);
    --section-top-padding: clamp(26px, 7vw, 42px);
  }
}

@media (max-width: 500px) {
  :root {
    --page-gutter: clamp(16px, 5vw, 20px);
    --section-top-padding: 26px;
  }
}