@import "tailwindcss";

@plugin "@tailwindcss/typography";
/* @variant dark (&:where(.dark, .dark *)); */

@theme {
  --font-sans: 'Quicksand', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@layer components {
  .task-completed {
    @apply opacity-50;
  }

  .task-completed .task-title {
    @apply line-through;
  }
}

.btn {
  @apply py-2 px-4 rounded no-underline font-bold inline-block;
}

.btn-sm {
  @apply py-1 px-2 text-sm;
}

.btn-lg {
  @apply py-4 px-6 rounded-md;
}

.btn-primary {
  @apply bg-emerald-600 font-medium text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600;
}

.btn-secondary {
  @apply bg-black text-white focus-visible:outline hover:bg-zinc-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black;
}

label {
  @apply block text-sm font-medium mb-2 dark:text-white;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='tel'],
input[type="file"],
input[type="date"],
select,
textarea {
  @apply appearance-none dark:bg-zinc-800 block w-full px-3 py-2 border border-zinc-300 dark:border-zinc-700 rounded-md placeholder-zinc-400 dark:text-white focus:outline-none focus:ring-emerald-300 focus:border-emerald-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5;
}


h1,
h2,
h3,
h4 {
  @apply font-medium text-zinc-900 dark:text-white;
}

p {
  @apply text-zinc-700 dark:text-zinc-400;
}


.task-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &.completed {
    opacity: 0.7;
    background: #f9f9f9;
  }

  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .task-meta {
    font-size: 0.9rem;
    color: #666;
    margin: 0.5rem 0;
  }

  .task-attachments {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
  }
}