@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --cloud: #fffaf0;
  --paper: #ffffff;
  --ink: #24134f;
  --ink-soft: #554876;
  --red: #ff3e55;
  --orange: #ff8126;
  --yellow: #ffd633;
  --green: #39c96b;
  --blue: #259df4;
  --purple: #8c48e8;
  --pink: #ff62a5;
  --pink-soft: #ffe1ee;
  --yellow-soft: #fff2a8;
  --green-soft: #d9f7df;
  --blue-soft: #d8f1ff;
  --purple-soft: #eadcff;
  --error: #a51f3b;
  --success: #126c3d;
  --focus: #065fbd;
  --line: rgba(36, 19, 79, 0.16);

  --rainbow: linear-gradient(90deg, var(--red), var(--orange) 17%, var(--yellow) 34%, var(--green) 51%, var(--blue) 70%, var(--purple) 86%, var(--pink));
  --rainbow-soft: linear-gradient(135deg, var(--pink-soft), var(--yellow-soft) 32%, var(--green-soft) 58%, var(--blue-soft) 78%, var(--purple-soft));

  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --step-2: clamp(1.55rem, 1.3rem + 1.1vw, 2.25rem);
  --step-3: clamp(2.15rem, 1.55rem + 2.45vw, 3.75rem);
  --step-4: clamp(3.15rem, 2rem + 5.2vw, 7.3rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-10: 9rem;

  --radius-sm: 0.85rem;
  --radius-md: 1.4rem;
  --radius-lg: 2.25rem;
  --radius-xl: 3.25rem;
  --outline: 3px solid var(--ink);
  --shadow-pop: 7px 8px 0 var(--ink);
  --shadow-small: 4px 5px 0 var(--ink);
  --shadow-soft: 0 24px 70px rgba(36, 19, 79, 0.17);
  --header-height: 4.55rem;
  --shell: 78rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-base: 1;
  --z-header: 50;
  --z-mobile: 60;
  --z-modal: 100;
  --z-skip: 120;
}