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

:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-white text-slate-800 antialiased dark:bg-ink dark:text-slate-200;
  font-feature-settings: "ss01";
}

::selection {
  @apply bg-brand-500/30 text-white;
}

@layer components {
  .container-x {
    @apply container mx-auto px-6;
  }

  .eyebrow {
    @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium uppercase tracking-wider text-brand-600 dark:border-white/10 dark:bg-white/5 dark:text-brand-300;
  }

  .card {
    @apply rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition dark:border-white/10 dark:bg-white/[0.03] dark:backdrop-blur;
  }

  .card-hover {
    @apply hover:-translate-y-1 hover:border-brand-500/30 hover:shadow-md dark:hover:border-brand-500/40 dark:hover:bg-white/[0.06];
  }

  .gradient-text {
    @apply bg-brand-gradient bg-clip-text text-transparent;
  }

  .link-underline {
    @apply relative after:absolute after:inset-x-0 after:bottom-0 after:h-px after:origin-right after:scale-x-0 after:bg-brand-400 after:transition-transform hover:after:origin-left hover:after:scale-x-100;
  }

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