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

@layer base {
  html {
    font-family: 'DM Sans', system-ui, sans-serif;
  }

  h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -0.01em;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-xl border border-slate-200/80 shadow-sm;
    @apply hover:shadow-md hover:border-slate-300/80 transition-all duration-200;
  }

  .card-header {
    @apply px-6 py-4 border-b border-slate-100 flex items-center justify-between;
  }

  .card-body {
    @apply p-6;
  }

  .stat-pill {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm;
    @apply bg-slate-50 border border-slate-100;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold tracking-wide uppercase;
  }

  .badge-success {
    @apply bg-emerald-50 text-emerald-700 border border-emerald-200/60;
  }

  .badge-danger {
    @apply bg-red-50 text-red-700 border border-red-200/60;
  }

  .badge-warning {
    @apply bg-amber-50 text-amber-700 border border-amber-200/60;
  }

  .badge-neutral {
    @apply bg-slate-100 text-slate-600 border border-slate-200/60;
  }

  .link-accent {
    @apply text-teal-600 hover:text-teal-800 font-medium transition-colors;
  }

  .progress-bar {
    @apply rounded-full overflow-hidden;
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.02) 100%);
  }

  .section-page {
    @apply min-h-screen;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  }
}

@layer utilities {
  .text-display {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
  }
}

/* Animations */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-up {
  animation: fade-up 0.5s ease-out both;
}

.animate-slide-in {
  animation: slide-in 0.3s ease-out both;
}

.animate-scale-in {
  animation: scale-in 0.4s ease-out both;
}

/* Stagger delays for card grid */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }
.stagger-9 { animation-delay: 0.45s; }

/* Prose overrides for markdown content */
.prose h2 {
  font-family: 'Fraunces', Georgia, serif;
  @apply text-slate-800;
}

.prose h3 {
  font-family: 'Fraunces', Georgia, serif;
  @apply text-slate-700;
}

.prose strong {
  @apply text-slate-800;
}

.prose ul li::marker {
  @apply text-teal-500;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */