/**
 * ============================================================================
 * 🟦 K2 Button Utility Classes
 * ----------------------------------------------------------------------------
 * Mobile-first, accessible, and token-based button styles for the K2 UI Framework.
 * Includes solid, gradient, and outline variants that automatically adapt
 * to light or dark backgrounds using `.k2-on-dark` and `.k2-on-light`.
 *
 * Structure:
 *   .k2-btn                → Base button styles (padding, radius, font, cursor)
 *   .k2-btn-[size]         → Size modifiers (sm → 4xl)
 *   .k2-btn--[variant]     → Variant modifiers (primary, secondary, accent, outline)
 *   .k2-on-dark / .k2-on-light → Contextual outline color adaptation
 *
 * iOS Safari Blue Tint Fix:
 *   Ensures consistent button text color on Apple devices where
 *   Safari may automatically apply a link tint to <button> elements.
 *
 * ----------------------------------------------------------------------------
 * 🔧 Usage Examples
 * ----------------------------------------------------------------------------
 * 1️⃣ Primary Solid Button
 *     <button class="k2-btn k2-btn--primary k2-btn-lg">Enroll Now</button>
 *
 * 2️⃣ Accent Gradient Button
 *     <button class="k2-btn k2-bg-gradient-accent-linear k2-text-light k2-btn-xl">
 *       Join Free Demo Class
 *     </button>
 *
 * 3️⃣ Outline Button (Light Background)
 *     <button class="k2-btn k2-btn--outline k2-on-light">Learn More</button>
 *
 * 4️⃣ Outline Button (Dark Background)
 *     <button class="k2-btn k2-btn--outline k2-on-dark">Contact Us</button>
 *
 * 5️⃣ Button Group Example
 *     <div class="k2-btngroup">
 *       <button class="k2-btn k2-btn--primary">Apply Now</button>
 *       <button class="k2-btn k2-btn--outline k2-on-light">Learn More</button>
 *     </div>
 * ============================================================================
 */

/* ------------------------------
   Base Button Styles
------------------------------ */
.k2-btn {
  display: inline-block;
  padding: var(--k2-space-2) var(--k2-space-3) !important;
  font-size: var(--k2-font-sm) !important;
  font-weight: 500;
  border-radius: var(--k2-radius-md);
  cursor: pointer;
  transition: all var(--k2-transition-default);
  text-align: center;
  text-decoration: none;
  border: none;
  background: none;
  appearance: none;

  transition1: transform var(--k2-transition-fast), box-shadow var(--k2-transition-fast);
}

/* iOS Safari link tint fix */
.k2-btn,
.k2-btn:link,
.k2-btn:visited,
.k2-btn:active {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  appearance: none;
}

/* Hover feedback */
.k2-btn:hover,
.k2-btn:focus-visible {
  transform1: scale(1.01) !important;
  box-shadow: var(--k2-shadow-md) !important;
}

/* ------------------------------
   Solid Color Variants
------------------------------ */
.k2-btn--primary {
  background: var(--k2-bg-primary) !important;
  color: var(--k2-bg-primary-text) !important;
}

.k2-btn--secondary {
  background: var(--k2-bg-secondary) !important;
  color: var(--k2-bg-secondary-text) !important;
}

.k2-btn--accent {
  background: var(--k2-bg-accent) !important;
  color: var(--k2-bg-accent-text) !important;
}

/* ------------------------------
   Outline Variant
------------------------------ */
.k2-btn--outline {
  background-color: transparent !important;
  border-width: var(--k2-border-width-md);
  border-style: solid;
  transition: all var(--k2-transition-default);
}

/* For light backgrounds */
.k2-btn--outline.k2-on-light {
  color: var(--k2-color-dark) !important;
  border-color: var(--k2-color-dark) !important;
}
.k2-btn--outline.k2-on-light:hover {
  background: var(--k2-color-dark) !important;
  color: var(--k2-color-on-dark) !important;
}

/* For dark backgrounds */
.k2-btn--outline.k2-on-dark {
  color: var(--k2-color-light) !important;
  border-color: var(--k2-color-light) !important;
}
.k2-btn--outline.k2-on-dark:hover {
  background: var(--k2-color-secondary) !important;
  color: var(--k2-color-on-secondary) !important;
}

/* Shared hover scale for outlines */
.k2-btn--outline:hover {
  transform1: scale(1.05) !important;
}

/* Focus visible for accessibility */
.k2-btn:focus-visible {
  outline: 2px dashed var(--k2-color-accent);
  outline-offset: 3px;
}

/* ------------------------------
   Disabled Button State
------------------------------ */
.k2-btn-disabled,
.k2-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.3);
  transition: opacity var(--k2-transition-default);
}

/* ------------------------------
   Button Groups
------------------------------ */
.k2-btngroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--k2-space-4, 0.75rem);
  text-align: center;
}

@media (min-width: 768px) {
  .k2-btngroup {
    gap: var(--k2-space-5, 1.25rem);
  }
}

/* Split group (joined edges) */
.k2-btngroup--split .k2-btn {
  border-radius: 0;
}

.k2-btngroup--split .k2-btn:first-child {
  border-top-left-radius: var(--k2-radius-md);
  border-bottom-left-radius: var(--k2-radius-md);
}

.k2-btngroup--split .k2-btn:last-child {
  border-top-right-radius: var(--k2-radius-md);
  border-bottom-right-radius: var(--k2-radius-md);
}

/* ------------------------------
   Button Sizes (Mobile-First)
------------------------------ */
.k2-btn-sm  { padding: var(--k2-space-1) var(--k2-space-3) !important; font-size: var(--k2-font-xs) !important; border-radius: var(--k2-radius-sm); }
.k2-btn-md  { padding: var(--k2-space-2) var(--k2-space-4) !important; font-size: var(--k2-font-sm) !important; border-radius: var(--k2-radius-lg); }
.k2-btn-lg  { padding: var(--k2-space-3) var(--k2-space-5) !important; font-size: var(--k2-font-md) !important; border-radius: var(--k2-radius-lg); }
.k2-btn-xl  { padding: var(--k2-space-3) var(--k2-space-6) !important; font-size: var(--k2-font-lg) !important; border-radius: var(--k2-radius-lg); }
.k2-btn-2xl { padding: var(--k2-space-4) var(--k2-space-8) !important; font-size: var(--k2-font-xl) !important; border-radius: var(--k2-radius-xl); }
.k2-btn-3xl { padding: var(--k2-space-5) var(--k2-space-8) !important; font-size: var(--k2-font-2xl) !important; border-radius: var(--k2-radius-xl); }
.k2-btn-4xl { padding: var(--k2-space-6) var(--k2-space-8)!important; font-size: var(--k2-font-3xl) !important; border-radius: var(--k2-radius-xl); }

/* ------------------------------
   Responsive Button Sizes
------------------------------ */
@media (min-width: 768px) {
  .k2-btn {
    font-size: var(--k2-font-base) !important;
    padding: var(--k2-space-2) var(--k2-space-3) !important;
  }
  .k2-btn-sm {
    font-size: var(--k2-font-sm) !important;
    padding: var(--k2-space-2) var(--k2-space-4) !important;
    border-radius: var(--k2-radius-sm) !important;
  }
  .k2-btn-lg {
    font-size: var(--k2-font-lg) !important;
    padding: var(--k2-space-3) var(--k2-space-5) !important;
    border-radius: var(--k2-radius-xl) !important;
  }
  .k2-btn-xl {
    font-size: var(--k2-font-lg) !important;
    padding: var(--k2-space-3) var(--k2-space-7) !important;
    font-weight: 500 !important;
    border-radius: var(--k2-radius-2xl) !important;
  }
}