@import "tailwindcss";

@theme {
  --color-foreground: var(--color-zinc-900);
  --color-background: var(--color-white);

  --color-border: var(--color-zinc-200);
  --color-ring: var(--color-blue-600);
  --color-muted: var(--color-zinc-100);
  --color-muted-foreground: var(--color-zinc-500);
  --color-primary: var(--color-zinc-900);
  --color-primary-foreground: var(--color-zinc-100);
  --color-destructive: var(--color-red-500);
  --color-destructive-foreground: var(--color-white);
}

@layer base {
  [data-theme="dark"] {
    --color-foreground: var(--color-zinc-100);
    --color-background: var(--color-zinc-950);

    --color-border: var(--color-zinc-700);
    --color-ring: var(--color-blue-700);
    --color-muted: var(--color-zinc-800);
    --color-muted-foreground: var(--color-zinc-400);
    --color-primary: var(--color-zinc-50);
    --color-primary-foreground: var(--color-zinc-900);
    --color-destructive: var(--color-red-900);
    --color-destructive-foreground: var(--color-white);
  }
}

@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

@layer base {
  * {
    @apply border-border min-w-0 ring-ring;
  }

  body {
    /* Nitro Kit looks great in Inter as well */
    /* https://rsms.me/inter */
    @apply bg-background text-foreground font-sans;
  }
}

.tjs-container {
  @apply p-4;
}