@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-paper: 255 253 248;
    --color-ink: 26 26 26;
    --color-line: 234 230 221;
    --color-surface: 255 255 255;
    --color-muted: 138 133 120;
  }
  .dark {
    --color-paper: 34 30 26;
    --color-ink: 240 235 224;
    --color-line: 64 58 48;
    --color-surface: 46 41 35;
    --color-muted: 173 164 148;
  }

  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-paper text-ink font-body antialiased transition-colors duration-200;
  }
  input,
  textarea,
  select {
    @apply bg-paper text-ink;
  }
  ::selection {
    @apply bg-splash-pink text-paper;
  }
  :focus-visible {
    outline: 2px solid #e5227e;
    outline-offset: 2px;
  }
}

@layer utilities {
  .tag-label {
    @apply font-mono text-[11px] uppercase tracking-tag text-muted;
  }
  .hairline {
    @apply border-line;
  }
  .link-cta {
    @apply inline-flex items-center gap-1 text-sm font-semibold text-clay transition-all hover:gap-2.5 hover:text-clay-dark;
  }
  .brand-gradient {
    background-image: linear-gradient(90deg, #f5871f 0%, #e5227e 35%, #1ea7e0 70%, #5b2c86 100%);
  }
  .brand-gradient-text {
    background-image: linear-gradient(90deg, #f5871f 0%, #e5227e 35%, #1ea7e0 70%, #5b2c86 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes drift {
  0%,
  100% {
    transform: translateY(0) rotate(var(--drift-rotate, 0deg));
  }
  50% {
    transform: translateY(-8px) rotate(calc(var(--drift-rotate, 0deg) + 8deg));
  }
}

.animate-drift {
  animation: drift 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}