/* css/style.css */

/* Base styles for color swatches */
.color-swatch span {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Prevent span from capturing hover */
}

.color-swatch:hover span {
  opacity: 1;
}

.color-swatch {
  min-width: 2.5rem; /* Minimum width for smaller percentages */
  /* Transitions for hover effects handled in PaletteRenderer.js and inline styles/Tailwind */
   transition: flex-grow 0.3s ease-in-out, min-width 0.3s ease-in-out, background-color 0.1s ease, filter 0.1s ease-out;
}

/* Basic scrollbar styling for Firefox (Fallback if not set on html element) */
/* Note: Main scrollbar styling (including dark/light) is handled inline in index.html <style> */
.scrollbar-thin {
  scrollbar-width: thin;
  /* Default colors (match dark theme in index.html) */
  scrollbar-color: #475569 #1e293b; /* thumb track */
}
/* Ensure specific textareas also get appropriate scrollbars based on theme */
body:not(.light) textarea.scrollbar-thin {
  scrollbar-color: #475569 #334155; /* dark input bg track */
}
body.light textarea.scrollbar-thin {
   scrollbar-color: #cbd5e1 #f1f5f9; /* light input bg track */
}


/* Optional: Lighter background for open details content in modal */
/* details[open] > div { */
  /* background-color: #f8fafc; /* slate-50 */
/* } */

/* Ensure copy button inside summary is clickable (pointer-events were reset on summary) */
details > summary button {
  pointer-events: auto;
}

/*
  Note: Most custom styles (scrollbar, drag-over, slider thumbs, fonts, modal arrow rotation, copy feedback animation)
  are handled inline in index.html's <style> block or via Tailwind classes.
  This file primarily contains base structural styles or fallbacks.
*/

/* Removed redundant span opacity rules as they are handled by Tailwind group-hover in index.html */