/* style.css
  Most styling is handled by Tailwind CSS in the HTML file.
  Use this file for global variables, custom animations, or 
  shared styles for the future MkDocs integration.
*/

:root {
  --primary-color: #000000;
  --text-color: #18181b; /* zinc-900 */
  --bg-color: #fafafa; /* zinc-50 */
}

/* A custom utility class for the text transition 
  to make the "shrinking" effect look smooth but sharp.
*/
.text-transition-state {
  opacity: 0;
  transform: translateY(10px);
}

.text-active-state {
  opacity: 1;
  transform: translateY(0);
}