@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}



/*@media (prefers-color-scheme: dark) {*/
/*  :root {*/
/*    --background: #0a0a0a;*/
/*    --foreground: #ededed;*/
/*  }*/
/*}*/

body {
  /*background: var(--background);*/
  /*color: var(--foreground);*/
  font-family: Arial, Helvetica, sans-serif;
}

@utility scroll-thin {
  @apply overflow-y-auto; /* Ensure it applies to scrollable elements */

  &::-webkit-scrollbar {
    width: 6px; /* Thin scrollbar */
  }

  &::-webkit-scrollbar-thumb {
    background-color: #444; /* Thumb color */
    border-radius: 10px;
  }

  &::-webkit-scrollbar-track {
    background: transparent; /* Track color */
  }
}

@theme {

  --font-whitney: var(--font-whitney);
  --font-ginto: var(--font-ginto);

  --color-brand: #5865F2;

  --color-gray-50: #ECEDEE;
  --color-gray-100: #DCDDDE;
  --color-gray-200: #B9BBBE;
  --color-gray-300: #8E9297;
  --color-gray-400: #72767d;
  --color-gray-500: #5C6067;
  --color-gray-600: #464950;
  --color-gray-700: #36393F;
  --color-gray-800: #2F3136;
  --color-gray-900: #202225;

  --shadow-sm: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
  --shadow-md: 0 4px 4px rgba(0,0,0,0.16);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.24);





}