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

@layer base {
  :root {
    --color-magenta:   #FF2D7E;
    --color-negro:     #000000;
    --color-hueso:     #F1EFE8;
    --color-lima:      #C6FF1A;
    --color-cian:      #1FE0FF;
    --color-gris:      #111111;
    scroll-behavior: smooth;
  }

  body {
    @apply bg-negro text-hueso font-body antialiased;
  }

  h1, h2, h3, h4, h5 {
    @apply font-display;
  }

  * {
    box-sizing: border-box;
  }
}

@layer utilities {
  .text-gradient-magenta {
    background: linear-gradient(135deg, #FF2D7E, #FF6A1A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .section-label {
    @apply font-mono text-xs text-magenta tracking-widest uppercase;
  }

  .section-heading {
    @apply font-display font-bold text-4xl md:text-5xl text-hueso mt-3 leading-tight;
  }

  .section-subtext {
    @apply font-body text-hueso/60 mt-4 max-w-xl mx-auto leading-relaxed;
  }
}