/**
 * NumeraIQ Button Styles
 * Matching React index.css exactly
 */

/* Base btn-lime - matching React:
   inline-flex items-center justify-center px-8 py-4
   bg-accent text-accent-foreground font-mono text-sm uppercase tracking-wider
   transition-all duration-200 hover:bg-lime-hover active:scale-[0.98]
*/
.btn-lime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: hsl(var(--lime));
  color: hsl(var(--dark));
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-lime:hover {
  background-color: hsl(var(--lime-hover));
}

.btn-lime:active {
  transform: scale(0.98);
}

/* btn-outline-light - matching React:
   inline-flex items-center justify-center px-8 py-4
   border border-text-light text-text-light font-mono text-sm uppercase tracking-wider
   transition-all duration-200 hover:bg-text-light hover:text-dark active:scale-[0.98]
*/
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: transparent;
  color: hsl(var(--text-light));
  border: 1px solid hsl(var(--text-light));
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline-light:hover {
  background-color: hsl(var(--text-light));
  color: hsl(var(--dark));
}

.btn-outline-light:active {
  transform: scale(0.98);
}

/* btn-outline-dark - matching React:
   inline-flex items-center justify-center px-8 py-4
   border border-dark text-dark font-mono text-sm uppercase tracking-wider
   transition-all duration-200 hover:bg-dark hover:text-text-light active:scale-[0.98]
*/
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: transparent;
  color: hsl(var(--dark));
  border: 1px solid hsl(var(--dark));
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline-dark:hover {
  background-color: hsl(var(--dark));
  color: hsl(var(--text-light));
}

.btn-outline-dark:active {
  transform: scale(0.98);
}

/* btn-dark for Hero (different from outline) */
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: hsl(var(--dark));
  color: hsl(var(--cream));
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-dark:hover {
  background-color: hsl(var(--dark) / 0.9);
}

/* btn-primary for CTA links */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: hsl(var(--dark));
  color: hsl(var(--text-light));
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: hsl(var(--dark-elevated));
}

/* Button icons */
.btn-lime svg,
.btn-outline-light svg,
.btn-outline-dark svg,
.btn-primary svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Focus states */
.btn-lime:focus-visible,
.btn-outline-light:focus-visible,
.btn-outline-dark:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid hsl(var(--lime));
  outline-offset: 2px;
}

/* Button Group */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Responsive */
@media (max-width: 640px) {
  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-group .btn-lime,
  .btn-group .btn-outline-light,
  .btn-group .btn-outline-dark,
  .btn-group .btn-dark {
    width: 100%;
    justify-content: center;
  }
}