@import url('../styles/fonts.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Skip to content link for accessibility (hidden) */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: transparent;
  color: transparent;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
  height: 0;
  width: 0;
  overflow: hidden;
}
.skip-to-content:focus {
  top: -999em;
}

.timeframe-button:focus,
button:focus,
[role="button"]:focus {
  outline: none !important;
  box-shadow: none !important;
  ring-width: 0 !important;
  --tw-ring-offset-width: 0 !important;
  --tw-ring-offset-color: transparent !important;
  --tw-ring-color: transparent !important;
}

/* Latency indicator colors */
.text-success {
  color: #27ad75; /* Green */
}
.text-success-dark {
  color: #1a8458; /* Darker green */
}
.text-warning {
  color: #ffbf00; /* Amber */
}
.text-error {
  color: #f0616d; /* Red */
}

/* WebSocket indicator */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Ensure all buttons have pointer cursor by default */
button:not([disabled]):not(.cursor-default):not(.cursor-not-allowed) {
  cursor: pointer !important;
}

/* Enhanced animations for price updates with more pronounced visual feedback */
@keyframes pulse-green {
  0% {
    color: white;
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
  20% {
    color: #27ad75; /* Vibrant green flash */
    transform: scale(1.02);
    text-shadow: 0 0 10px rgba(39, 173, 117, 0.5);
  }
  40% {
    color: #27ad75;
    transform: scale(1.01);
    text-shadow: 0 0 5px rgba(39, 173, 117, 0.3);
  }
  100% {
    color: white;
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
}

@keyframes pulse-red {
  0% {
    color: white;
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
  20% {
    color: #f0616d; /* Vibrant red flash */
    transform: scale(1.02);
    text-shadow: 0 0 10px rgba(240, 97, 109, 0.5);
  }
  40% {
    color: #f0616d;
    transform: scale(1.01);
    text-shadow: 0 0 5px rgba(240, 97, 109, 0.3);
  }
  100% {
    color: white;
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
}

.animate-pulse-green {
  animation: pulse-green 1s ease-out;
}

.animate-pulse-red {
  animation: pulse-red 1s ease-out;
}

/* Medium screen specific animations */
@keyframes pulse-green-primary {
  0% {
    color: #FF6600; /* Primary color */
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
  20% {
    color: #27ad75; /* Green flash */
    transform: scale(1.02);
    text-shadow: 0 0 10px rgba(39, 173, 117, 0.5);
  }
  40% {
    color: #27ad75;
    transform: scale(1.01);
    text-shadow: 0 0 5px rgba(39, 173, 117, 0.3);
  }
  100% {
    color: #FF6600; /* Back to primary */
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
}

@keyframes pulse-red-primary {
  0% {
    color: #FF6600; /* Primary color */
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
  20% {
    color: #f0616d; /* Red flash */
    transform: scale(1.02);
    text-shadow: 0 0 10px rgba(240, 97, 109, 0.5);
  }
  40% {
    color: #f0616d;
    transform: scale(1.01);
    text-shadow: 0 0 5px rgba(240, 97, 109, 0.3);
  }
  100% {
    color: #FF6600; /* Back to primary */
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
}

