/* Custom stylesheet for Color Crony */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #FFFFFF !important;
}

/* Rainbow Track Gradient for the 1D Hue Slider */
.rainbow-gradient {
  background: linear-gradient(to right, 
    #ff0000 0%, 
    #ffff00 17%, 
    #00ff00 33%, 
    #00ffff 50%, 
    #0000ff 67%, 
    #ff00ff 83%, 
    #ff0000 100%
  );
}

/* Highlight animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom hides scrollbars in the central pages area while allowing flexible sizing */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Custom transitions and states */
button, [data-route-link], [data-copy-cell], .group {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-indicator {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hide detailed input boxes for the midpoint color picker to keep it sleek and compact */
#cg-picker-middle-root .font-mono {
  display: none !important;
}
/* Reduce vertical gaps slightly inside the midpoint color picker */
#cg-picker-middle-root .gap-4 {
  gap: 0.5rem !important;
}
#cg-picker-middle-root .mt-1 {
  margin-top: 0 !important;
}