style.css

/* Color theming: set CSS variables for primary/secondary from user input if needed.
   Defaults are set to indigo/rose if not overridden. */

:root {
  /* Replace these RGB triples with your own to customize the palette */
  --primary: 99 102 241;      /* indigo-500-ish */
  --primary-50: 238 242 255;
  --primary-100: 224 231 255;
  --primary-200: 199 210 254;
  --primary-300: 165 180 252;
  --primary-400: 129 140 248;
  --primary-500: 99 102 241;
  --primary-600: 79 70 229;
  --primary-700: 67 56 202;
  --primary-800: 55 48 163;
  --primary-900: 49 46 129;
  --primary-950: 30 27 75;

  --secondary: 244 63 94;     /* rose-500-ish */
  --secondary-50: 255 242 242;
  --secondary-100: 254 226 226;
  --secondary-200: 254 205 211;
  --secondary-300: 252 165 165;
  --secondary-400: 248 113 113;
  --secondary-500: 244 63 94;
  --secondary-600: 225 29 72;
  --secondary-700: 190 18 60;
  --secondary-800: 159 18 57;
  --secondary-900: 136 19 55;
  --secondary-950: 76 7 27;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: 129 140 248;     /* brighter indigo in dark mode */
    --secondary: 248 113 113;   /* brighter rose in dark mode */
  }
}

/* Optional: smooth transitions when toggling theme */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide native file input (we use custom button) */
input[type="file"] {
  display: none;
}

/* Scrollbar tweaks for dark mode */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.12); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.2); }
}