@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #000000;
  --font-size-base: 18px;
}

.dark {
  --background: #000000;
  --foreground: #ffffff;
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --foreground: #ffffff;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
}

@layer components {
  .text-link {
    @apply underline decoration-1 underline-offset-2 hover:opacity-70 transition-opacity;
  }
}

@keyframes pulseAnimation {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes floatAnimation {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(0.5deg); }
}

.pulse-animation {
  animation: pulseAnimation 10s infinite ease-in-out;
}

.float-animation {
  animation: floatAnimation 8s infinite ease-in-out;
}

::selection {
  background-color: #b3d4fc;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  ::selection {
    background-color: #444;
    color: #fff;
  }
}
