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

@layer base {
  /* Selection colors — accent green */
  ::selection {
    background-color: #dcfce7;
    color: #14532d;
  }

  ::-moz-selection {
    background-color: #dcfce7;
    color: #14532d;
  }

  /* Scrollbar — thin, warm tones */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #f6f5f3;
  }

  ::-webkit-scrollbar-thumb {
    background: #d1cfc9;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #a8a69f;
  }

  /* Firefox scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: #d1cfc9 #f6f5f3;
  }

  /* Focus ring — consistent accent ring on interactive elements */
  *:focus-visible {
    outline: 2px solid #14532d;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Base body defaults */
  html {
    overflow-y: scroll;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

@layer components {
  /* Card — borders over shadows */
  .card {
    @apply rounded-lg border border-warm-200 bg-warm-white p-6;
  }

  /* Stat card with top accent border */
  .stat-card {
    @apply card border-t-2 border-t-accent-500;
  }

  /* Badge pill */
  .badge {
    @apply inline-flex items-center gap-1 rounded-md border border-warm-200 bg-warm-50 px-2 py-0.5 text-xs font-medium text-warm-700;
  }

  .badge-accent {
    @apply inline-flex items-center gap-1 rounded-md border border-accent-200 bg-accent-50 px-2 py-0.5 text-xs font-medium text-accent-500;
  }

  /* Section heading — uppercase muted label */
  .section-label {
    @apply text-2xs font-semibold uppercase tracking-wider text-warm-500;
  }

  /* Nav item base */
  .nav-item {
    @apply flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-warm-600 transition-colors hover:bg-warm-50 hover:text-warm-900;
  }

  .nav-item-active {
    @apply flex items-center gap-3 rounded-md bg-accent-50 px-3 py-2 text-sm font-medium text-accent-500 transition-colors;
  }
}

@layer utilities {
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Skeleton pulse animation */
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.animate-skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}