/* Custom Neo-Brutalism Utilities */
.neo-box {
  border: 3px solid black;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  transition: all 0.1s ease;
}
.dark .neo-box {
  border-color: white;
  box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
}

.neo-box:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
}
.dark .neo-box:active {
  box-shadow: 2px 2px 0px 0px rgba(255, 255, 255, 1);
}

.neo-btn {
  border: 2px solid black;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  font-weight: 800;
  transition: all 0.1s ease;
}
.dark .neo-btn {
  border-color: white;
  box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
}

.neo-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
}
.dark .neo-btn:hover {
  box-shadow: 5px 5px 0px 0px rgba(255, 255, 255, 1);
}

.neo-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
}
.dark .neo-btn:active {
  box-shadow: 2px 2px 0px 0px rgba(255, 255, 255, 1);
}

.neo-input {
  border: 3px solid black;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}
.dark .neo-input {
  border-color: white;
  box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
  background-color: #2d2d2d;
  color: white;
}

.neo-input:focus {
  outline: none;
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
}
.dark .neo-input:focus {
  box-shadow: 6px 6px 0px 0px rgba(255, 255, 255, 1);
}

/* Text Stroke for Hero */
.text-stroke-black {
  -webkit-text-stroke: 2px black;
  paint-order: stroke fill;
}
.dark .text-stroke-black {
  -webkit-text-stroke: 2px white;
  color: black; /* Make the fill black in dark mode for contrast */
  paint-order: stroke fill;
}

/* Themed Outline Text */
.themed-outline-text {
  color: black;
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
}
.dark .themed-outline-text {
  color: white;
  -webkit-text-stroke: 2px black;
}