@import "tailwindcss";
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--border: 0 0% 90%;
--accent: 221 83% 53%;
}
.dark {
--background: 0 0% 4%;
--foreground: 0 0% 98%;
--muted: 0 0% 9%;
--muted-foreground: 0 0% 60%;
--border: 0 0% 14%;
--accent: 221 83% 63%;
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
}
@keyframes reveal {
from {
clip-path: circle(0px at var(--x, 50%) var(--y, 50%));
}
to {
clip-path: circle(2000px at var(--x, 50%) var(--y, 50%));
}
}
@keyframes iconSpin {
from {
transform: rotate(-90deg) scale(0.5);
opacity: 0;
}
to {
transform: rotate(0deg) scale(1);
opacity: 1;
}
}
::view-transition-new(root) {
animation: reveal 0.6s ease-in-out;
z-index: 9999;
}
::view-transition-old(root) {
animation: none;
z-index: 1;
}