@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

/* Class-based dark mode: the FOUC script in app.html and the theme store add
   `dark` to <html> so `dark:` utilities apply without relying on prefers-color-scheme. */
@custom-variant dark (&:where(.dark, .dark *));

html {
  font-size: 16px;
}

/* Tailwind 4's preflight drops the pointer cursor on buttons; restore it for
   enabled buttons (disabled ones keep the default arrow). */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

body {
  background-color: var(--color-neutral-100);
}
:where(.dark) body {
  background-color: var(--color-neutral-800);
}

.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Form inputs in dark mode — the forms plugin defaults to a white background,
   which would punch holes through panels. Override at the element level so we
   don't have to add `dark:bg-neutral-800` to every <input>/<textarea>. */
:where(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
:where(.dark) textarea,
:where(.dark) select {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-100);
}
:where(.dark) input::placeholder,
:where(.dark) textarea::placeholder {
  color: var(--color-neutral-500);
}

/* Tighter heading rhythm for all rendered (prose) content. Overrides the
   typography plugin's em-based heading margins; the first block stays flush. */
.prose :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  font-weight: normal;
}
.prose :is(h1) {
  font-size: 1.65rem;
  color: var(--color-accent);
}
.prose :is(p) {
  margin-top: 0;
}
.prose > :first-child {
  margin-top: 0;
}

/* Prose headings/strong/links default to dark text colors; flip them in dark mode. */
:where(.dark) .prose :is(h1, h2, h3, h4, h5, h6, strong, th) {
  color: var(--color-neutral-100);
}
:where(.dark) .prose :is(h1) {
  color: var(--color-accent);
}
:where(.dark) .prose :is(blockquote) {
  color: var(--color-neutral-400);
  border-left-color: var(--color-neutral-700);
}
:where(.dark) .prose :is(hr, thead, tbody tr) {
  border-color: var(--color-neutral-700);
}

@theme {
  --color-accent: #e32a6d;
  --color-accent-hover: #c4205a;
  --color-secondary: #ffaf25;
  --color-secondary-hover: #e69e1a;
}
