/* ==========================================================================
   serviceR Button Component Spec
   ========================================================================== */

/* ---------------------------------------------------------
   BASE BUTTON (Default State)
   --------------------------------------------------------- */
.btn {
  /* Layout & Typography */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body); /* Inter */
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  
  /* Core Styling */
  border-radius: 6px; /* Precise, modern geometry */
  border: 1px solid transparent;
  cursor: pointer;
  
  /* Dynamic Micro-animations */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus State (Accessibility) */
.btn:focus-visible {
  outline: 2px solid var(--color-accent-bg); /* Neon Cyan focus ring */
  outline-offset: 2px;
}

/* Disabled State */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   VARIANTS
   --------------------------------------------------------- */

/* 1. Primary Button (The Standard Workhorse) */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  /* Subtle physical lift to reward interaction */
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* 2. Secondary Button (Outlined, Less Prominent) */
.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-hover);
}
.btn-secondary:active:not(:disabled) {
  background-color: var(--color-bg-tertiary);
}

/* 3. Ghost Button (Text Only, No Border) */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.btn-ghost:active:not(:disabled) {
  background-color: var(--color-bg-tertiary);
}

/* 4. Accent/Execute Button (Bonus Variant for specific CTAs) */
.btn-accent {
  background-color: var(--color-accent-bg); /* Neon Cyan */
  color: var(--color-accent-content);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px; /* Slightly sharper edges for a more technical feel */
}
.btn-accent:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
  /* Glowing neon drop shadow to emphasize 'execution' */
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.4); 
}
.btn-accent:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}