@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
  --font-geist-mono: "Courier New", Courier, monospace;

  /* Main Colors */
  --color-blue: #1657D9;
  --color-green: #16A34A;
  --color-red: #DC2626;
  --color-amber: #B45309;
  --color-amber-light: #F59E0B;

  /* Aliases */
  --blue: #1657D9;
  --green: #16A34A;
  --red: #DC2626;
  --amber: #B45309;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-blue: var(--color-blue);
  --color-green: var(--color-green);
  --color-red: var(--color-red);
  --color-amber: var(--color-amber);
  --font-sans: var(--font-inter), Arial, Helvetica, sans-serif;
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
}

.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background-color: #cbd5e1;
}

.dual-range-input {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
  outline: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}

.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1657d9;
  cursor: pointer;
  pointer-events: all;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.dual-range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1657d9;
  cursor: pointer;
  pointer-events: all;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}