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

:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  background: #090b0f;
  color: #e8edf4;
}

body {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

@layer components {
  .panel {
    @apply rounded-lg border border-vin-border bg-vin-panel shadow-panel;
  }

  .panel-soft {
    @apply rounded-lg border border-vin-border bg-vin-panel2;
  }

  .input {
    @apply w-full rounded-md border border-vin-border bg-[#0d1117] px-3 py-2 text-sm text-vin-text outline-none transition focus:border-vin-cyan;
  }

  .button {
    @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-md border border-vin-border bg-vin-panel2 px-4 py-2 text-sm font-medium text-vin-text transition hover:border-vin-cyan hover:text-white disabled:cursor-not-allowed disabled:opacity-50;
  }

  .button-primary {
    @apply border-vin-cyan bg-vin-cyan text-[#061013] hover:border-white hover:text-[#061013];
  }

  .table-header {
    @apply border-b border-vin-border bg-[#0d1117] px-3 py-2 text-left text-xs font-semibold uppercase text-vin-muted;
  }

  .table-cell {
    @apply border-b border-vin-border px-3 py-3 text-sm text-vin-text;
  }
}