@import "tailwindcss";
@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  font-family: var(--font-sans);
}

@keyframes name-fill-in {
  from { fill-opacity: 0; }
  to   { fill-opacity: 1; }
}

.name-outline-fill {
  fill: #e4e4e7;           /* zinc-200 */
  stroke: #d4d4d8;         /* zinc-300 */
  fill-opacity: 0;
  animation: name-fill-in 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.dark .name-outline-fill {
  fill: #27272a;            /* zinc-800 */
  stroke: #27272a;          /* zinc-800 */
}