index.css

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

/* 
- https://ui.shadcn.com/themes
- https://daisyui.com/docs/colors/
- https://github.com/saadeghi/daisyui/blob/master/src/theming/themes.js
- https://www.radix-ui.com/colors
- https://github.com/kiliman/shadcn-custom-theme
*/

@layer base {
  :root {
    --body: theme(colors.zinc.100);
    --body-content: theme(colors.zinc.900);
    --card: theme(colors.white);
    --card-content: theme(colors.zinc.900);
    --rest: theme(colors.neutral.100);
    --rest-content: theme(colors.neutral.500);

    --border: theme(colors.zinc.200);
    --primary: theme(colors.orange.500);
  }

  .dark {
    --body: theme(colors.stone.950);
    --body-content: theme(colors.stone.300);
    --card: theme(colors.stone.800);
    --card-content: theme(colors.stone.300);
    --rest: theme(colors.neutral.700);
    --rest-content: theme(colors.neutral.500);

    --border: theme(colors.stone.800);
    --primary: theme(colors.orange.500);

    --body: #1f2020;
    --card: #2b2b2b;
    --border: #424242;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply !bg-body text-body-content;
  }

  [data-drag-node] {
    @apply cursor-move;
  }

  #root {
    @apply mx-auto max-w-[1040px] overflow-hidden px-2.5 pb-8;
  }
}

@layer utilities {
  /* https://github.com/reslear/tailwind-scrollbar-hide/blob/main/src/index.js */

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
}

.animate-tick {
  animation: tick 2s linear infinite;
}

@keyframes tick {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}