@import "tailwindcss";

/* Class-based dark mode, so the app can offer System / Light / Dark rather
   than only following the OS. */
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  [hidden] { display: none !important; }

  /* It is a tool, not a document: dragging across it should not leave a
     selection behind. Text fields opt back in. */
  html { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
  img, a { -webkit-user-drag: none; }

  /* No focus ring anywhere. :focus-visible has to go too — WebKit counts a
     click on a select or checkbox as "focus worth showing" and draws its own,
     which survives a :focus rule alone. */
  *, *::before, *::after, :focus, :focus-visible, :focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }
  button:focus, button:focus-visible, select:focus, [contenteditable]:focus {
    outline: none !important;
  }

  html, body, #root { height: 100%; }
  body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background: var(--color-slate-100);
    color: var(--color-slate-800);
  }
  .dark body {
    background: var(--color-slate-950);
    color: var(--color-slate-100);
  }

  /* Borders do the separating; the scrollbar should not compete. */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--color-slate-300);
    border-radius: 9999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  .dark ::-webkit-scrollbar-thumb {
    background: var(--color-slate-700);
    background-clip: content-box;
  }
}