@layer tokens {
  @font-face {
    font-family: "Oferta do Dia";
    src: url("../fonts/Oferta-do-Dia.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
  }

  @font-face {
    font-family: "Mrs Saint Delafield";
    src: url("../fonts/MrsSaintDelafield-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
  }

  :root {
    --color-white: #fff;
    --color-off-white: #fdfaf6;
    --color-cream: #fdfced;
    --color-black: #271e17;

    --color-gray-light: #e7e7e7;
    --color-gray: #999;
    --color-gray-dark: #333;

    --color-brand-magenta: #ed2492;
    --color-brand-magenta-dark: #d7084a;
    --color-brand-magenta-light: #fde5f2;

    --color-brand-green: #26a853;
    --color-brand-green-dark: #219449;
    --color-brand-green-light: #e5f5ea;

    --color-yellow: #d4a018;
    --color-blue: #3b82f6;
    --color-red: #c0392b;

    --font-family-display: "Oferta do Dia", sans-serif;
    --font-family-body: "Poppins", sans-serif;
    --font-family-script: "Mrs Saint Delafield", cursive;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 18px;
    --font-size-lg: 24px;
    --font-size-xl: clamp(28px, 2.4vw, 34px);
    --font-size-2xl: clamp(34px, 4vw, 52px);
    --font-size-3xl: clamp(38px, 5.6vw, 76px);
    --font-size-4xl: clamp(44px, 6vw, 96px);
    --font-size-5xl: clamp(56px, 11vw, 150px);
    --font-size-6xl: clamp(64px, 17vw, 208px);

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

    --container-width: 1280px;
    --container-width-tight: 1040px;
    --container-width-narrow: 780px;

    --header-height: 6rem;

    --radius-blob: 255px 25px 225px 25px / 25px 225px 25px 255px;
    --radius-blob-alt: 25px 255px 25px 225px / 225px 25px 255px 25px;
    --radius-full: 999px;
    --radius-md: 16px;

    --shadow-soft: 0 24px 70px -18px
      color-mix(in srgb, var(--color-brand-magenta) 20%, transparent);
    --shadow-sm: 0 2px 8px
      color-mix(in srgb, var(--color-black) 10%, transparent);

    --reveal-distance: 4rem;
    --reveal-duration: 1s;
    --reveal-ease: cubic-bezier(0.4, 1, 0.4, 1);
    --reveal-stagger: 200ms;

    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.16 0 0 0 0 0.15 0 0 0 0 0.11 8 0 0 0 -5.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }

  @media (max-width: 1024px) {
    :root {
      --space-7: 3rem;
      --space-8: 4rem;
      --space-9: 4.5rem;
      --space-10: 6rem;
    }
  }

  @media (max-width: 768px) {
    :root {
      --space-6: 1.5rem;
      --space-7: 2.5rem;
      --space-8: 3rem;
      --space-9: 3.5rem;
      --space-10: 4.5rem;
    }
  }
}