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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
  }

.dark {
  --background: 0 0% 13%;
  --foreground: 0 0% 85%;
  --card: 0 0% 15%;
  --card-foreground: 0 0% 90%;
  --primary: 0 0% 20%;
  --primary-foreground: 0 0% 100%;
  --accent: 35 100% 60%;
  --muted: 0 0% 40%;
  --muted-foreground: 0 0% 60%;
  --border: 0 0% 30%;
  --input: 0 0% 20%;
  --ring: 0 0% 50%;
}

  body {
    @apply bg-background text-foreground font-mono text-sm leading-relaxed;
  }

  a {
    @apply text-accent underline hover:brightness-125;
  }

  input, select, textarea {
    @apply bg-card text-card-foreground border border-border rounded-md px-3 py-2;
  }

  table {
    @apply border-separate border-spacing-y-1 text-left w-full;
  }

  th, td {
    @apply px-4 py-2;
  }

  th {
    @apply text-card-foreground font-semibold;
  }

  tr {
    @apply border-b border-border;
  }

  .card {
    @apply bg-card text-card-foreground p-4 rounded-md shadow;
  }

  .btn-primary {
    @apply bg-primary text-primary-foreground px-4 py-2 rounded hover:brightness-110;
  }
}