@import "tailwindcss";

:root {
  --background: #f2ecdf;
  --foreground: #0f172a;
  --card: rgba(255, 255, 255, 0.86);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-space-grotesk);
  --font-serif: var(--font-newsreader);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--background);
  background-image:
    radial-gradient(circle at top left, rgba(255, 188, 120, 0.28), transparent 28%),
    radial-gradient(circle at top right, rgba(67, 142, 255, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(242, 236, 223, 1));
  color: var(--foreground);
  font-family: var(--font-space-grotesk), sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: rgba(15, 23, 42, 0.16);
}