@import 'tailwindcss';
@import 'tw-animate-css';

@utility scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: var(--color-muted);
  }
}

@theme {
  --color-panel: #2a2a2a;
  --color-canvas: #1e1e1e;
  --color-border: #3a3a3a;
  --color-hover: #353535;
  --color-accent: #3b82f6;
  --color-surface: #e0e0e0;
  --color-muted: #888888;
  --color-input: #1e1e1e;
  --color-component: #9747ff;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 13px;
  color: var(--color-surface);
  background: var(--color-canvas);
  user-select: none;
  -webkit-user-select: none;
}

input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  display: none;
}