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

:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color-scheme: dark light;

  --background: white;
  --foreground: black;
  --transparentish: rgba(0, 0, 0, 0.2);
  --accent-bg: #cbd5e1;
  --accent-fg: #1e293b;
}
/* 
a {
  color: var(--accent-fg);
} */

@media (prefers-color-scheme: dark) {
  :root {
    --background: #18181b;
    --foreground: #d4d4d8;
    --transparentish: rgba(255, 255, 255, 0.2);
    --accent-bg: #334155;
    --accent-fg: #94a3b8;
  }
}
/* https://devdojo.com/pines/docs/button */
.btn {
  @apply rounded-md bg-neutral-950 px-4 py-2 text-sm font-medium tracking-wide text-white  dark:bg-neutral-200 dark:text-neutral-800;
}
.btn-outline {
  @apply rounded-md border border-neutral-200/70 bg-white px-4 py-2 text-sm font-medium tracking-wide text-neutral-500 dark:bg-neutral-900 dark:text-neutral-200;
}
.input {
  @apply flex h-10 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700/70 dark:bg-neutral-900;
}