@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@iconify/tailwind4";

@theme {
  --color-rose-pine-base: hsl(249deg, 22%, 12%);
  --color-rose-pine-surface: hsl(247deg, 23%, 15%);
  --color-rose-pine-overlay: hsl(248deg, 25%, 18%);
  --color-rose-pine-muted: hsl(249deg, 12%, 47%);
  --color-rose-pine-subtle: hsl(248deg, 15%, 61%);
  --color-rose-pine-text: hsl(245deg, 50%, 91%);
  --color-rose-pine-love: hsl(343deg, 76%, 68%);
  --color-rose-pine-gold: hsl(35deg, 88%, 72%);
  --color-rose-pine-rose: hsl(2deg, 55%, 83%);
  --color-rose-pine-pine: hsl(197deg, 49%, 38%);
  --color-rose-pine-foam: hsl(189deg, 43%, 73%);
  --color-rose-pine-iris: hsl(267deg, 57%, 78%);
  --color-rose-pine-highlight-low: hsl(244deg, 18%, 15%);
  --color-rose-pine-highlight-med: hsl(249deg, 15%, 28%);
  --color-rose-pine-highlight-high: hsl(248deg, 13%, 36%);

  --font-sans: "Recursive Variable";

  --font-cursive: "Recursive Variable";
  --font-cursive--font-variation-settings: "CRSV" 1, "CASL" 1;

  --font-mono: "Recursive Variable";
  --font-mono--font-variation-settings: "MONO" 1;

  --font-skeleton: "Flow Block";

  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(0deg);
    }
    33% {
      transform: rotate(-5deg);
    }
    66% {
      transform: rotate(5deg);
    }
  }
}