@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: #fafafa;
  --foreground: #18181b;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --text-xs: 0.8125rem;
  --text-xs--line-height: 1.125rem;
  --text-sm: 0.9375rem;
  --text-sm--line-height: 1.375rem;
  --text-base: 1.0625rem;
  --text-base--line-height: 1.625rem;
  --text-lg: 1.1875rem;
  --text-lg--line-height: 1.75rem;
}

.dark {
  --background: #09090b;
  --foreground: #f4f4f5;
}

* {
  scrollbar-color: #d4d4d8 transparent;
}

.dark * {
  scrollbar-color: #3f3f46 transparent;
}

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  margin: 0;
}

button,
summary,
select {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
a[href],
summary,
select:not(:disabled),
label:has(input[type="checkbox"]:not(:disabled)),
label:has(input[type="radio"]:not(:disabled)),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
}

dialog::backdrop {
  animation: none;
}