@import "tailwindcss";

/* @theme {
  --color-gray-50:  oklch(0.984 0.005 220.000);
  --color-gray-100: oklch(0.968 0.010 220.000);
  --color-gray-200: oklch(0.929 0.020 222.000);
  --color-gray-300: oklch(0.869 0.035 220.000);
  --color-gray-400: oklch(0.704 0.060 218.000);
  --color-gray-500: oklch(0.554 0.070 218.000);
  --color-gray-600: oklch(0.446 0.065 218.000);
  --color-gray-700: oklch(0.372 0.060 218.000);
  --color-gray-800: oklch(0.279 0.055 220.000);
  --color-gray-900: oklch(0.208 0.050 222.000);
  --color-gray-950: oklch(0.129 0.050 222.000);
} */

@theme {
  --color-gray-50: oklch(0.984 0.012 28);
  --color-gray-100: oklch(0.968 0.017 28);
  --color-gray-200: oklch(0.929 0.025 28);
  --color-gray-300: oklch(0.869 0.035 28);
  --color-gray-400: oklch(0.704 0.05 28);
  --color-gray-500: oklch(0.554 0.06 28);
  --color-gray-600: oklch(0.446 0.058 28);
  --color-gray-700: oklch(0.372 0.058 28);
  --color-gray-800: oklch(0.279 0.055 28);
  --color-gray-900: oklch(0.208 0.055 28);
  --color-gray-950: oklch(0.129 0.055 28);
}

@layer base {
  html {
    color-scheme: light dark;
  }

  * {
    @apply border-gray-200 dark:border-gray-800;
  }

  html,
  body {
    @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
  }

  .using-mouse * {
    outline: none !important;
  }
}

@media (width >= 64rem /* 1024px */) {
  html,
  body {
    scrollbar-gutter: stable both-edges !important;
  }
}
.scroll-thin {
  scrollbar-width: thin;
  /*scrollbar-gutter: stable both-edges !important;*/
}

.scroll-none {
  scrollbar-width: none;
}