@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap");

@import "tailwindcss";
@import "@catppuccin/tailwindcss/mocha.css";

@theme {
  --shadow-kbd: 0px 2px 0px 0px rgba(0, 0, 245, 0.07);
  --font-lexend: "Lexend", system-ui;
  --font-atkinson: "Atkinson Hyperlegible Next", system-ui;
  --font-flow: "Flow Circular", system-ui;
}

@layer base {
  body {
    /*@apply font-flow;*/
    @apply font-atkinson;
  }
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
}