@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;
}

 @layer base {
    /* 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);
    }

    /* Redraw the native search clear button so it follows our palette instead
    of the OS accent color. Firefox renders no button at all. */
    input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 1.2em;
    height: 1.2em;
    background-color: var(--color-neutral-400);
    -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 10.6 6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4z"/></svg>')
      no-repeat center / contain;
    cursor: pointer;
    }
    :where(.dark) input[type="search"]::-webkit-search-cancel-button {
    background-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;
}