/* Shared UI Components
 * Scope: Buttons only for now
 * This file normalizes base button styles across pages without changing visual themes.
 */

/* Design tokens removed from here; now defined globally in tokens.css under :root */

/* Base button: apply to existing page-specific classes as aliases */
.btn,
.btn--primary,
.btn--secondary,
.btn--primary-dark,
.btn--secondary-dark,
.uc-btn,
.kb-hero__btn,
.kb-cta__btn {
  display: inline-block;
  padding: clamp(16px, 4vw, 18px) clamp(12px, 3vw, 24px);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  transition: all 0.3s ease;
  border: var(--btn-border-width, 1px) solid transparent;
  cursor: pointer;
  text-align: center;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: var(--btn-backdrop-filter, none);
}

/* Unified button variants */
.btn--primary {
  background: var(--btn-primary-bg, #007bff);
  color: var(--btn-primary-color, #ffffff);
  border-color: var(--btn-primary-border, transparent);
}

.btn--primary:hover {
  background: var(--btn-primary-hover-bg, #404040) !important;
  color: var(--btn-primary-hover-color, #ffffff) !important;
  border-color: var(--btn-primary-hover-border, transparent) !important;
  box-shadow: var(--btn-primary-hover-shadow, 0 8px 25px rgba(31, 31, 31, 0.3)) !important;
  transform: var(--btn-primary-hover-transform, translateY(-2px)) !important;
}

.btn--primary:focus,
.btn--primary:active {
  background: var(--btn-primary-focus-bg, #007bff);
  color: var(--btn-primary-focus-color, #ffffff);
  border-color: var(--btn-primary-focus-border, transparent);
}

.btn--secondary {
  background: var(--btn-secondary-bg, #f1f1f1);
  color: var(--btn-secondary-color, #333333);
  border-color: var(--btn-secondary-border, #e0e0e0);
}

.btn--secondary:hover {
  background: var(--btn-secondary-hover-bg, #1F1F1F) !important;
  color: var(--btn-secondary-hover-color, #ffffff) !important;
  border-color: var(--btn-secondary-hover-border, #1F1F1F) !important;
  box-shadow: var(--btn-secondary-hover-shadow, 0 6px 20px rgba(31, 31, 31, 0.25)) !important;
  transform: var(--btn-secondary-hover-transform, translateY(-1px)) !important;
}

.btn--secondary:focus,
.btn--secondary:active {
  background: var(--btn-secondary-focus-bg, #f1f1f1);
  color: var(--btn-secondary-focus-color, #333333);
  border-color: var(--btn-secondary-focus-border, #e0e0e0);
}

/* Dark background button variants */
.btn--primary-dark {
  background: var(--btn-primary-bg-dark, #ffffff);
  color: var(--btn-primary-color-dark, #1F1F1F);
  border-color: var(--btn-primary-border-dark, #ffffff);
}

.btn--primary-dark:hover {
  background: var(--btn-primary-hover-bg-dark, #f0f0f0) !important;
  color: var(--btn-primary-hover-color-dark, #1F1F1F) !important;
  border-color: var(--btn-primary-hover-border-dark, #f0f0f0) !important;
  box-shadow: var(--btn-primary-hover-shadow-dark, 0 6px 20px rgba(255, 255, 255, 0.25)) !important;
  transform: var(--btn-primary-hover-transform-dark, translateY(-2px)) !important;
}

.btn--primary-dark:focus,
.btn--primary-dark:active {
  background: var(--btn-primary-focus-bg-dark, #ffffff);
  color: var(--btn-primary-focus-color-dark, #1F1F1F);
  border-color: var(--btn-primary-focus-border-dark, #ffffff);
}

.btn--secondary-dark {
  background: var(--btn-secondary-bg-dark, transparent);
  color: var(--btn-secondary-color-dark, #ffffff);
  border-color: var(--btn-secondary-border-dark, #ffffff);
}

.btn--secondary-dark:hover {
  background: var(--btn-secondary-hover-bg-dark, #ffffff) !important;
  color: var(--btn-secondary-hover-color-dark, #1F1F1F) !important;
  border-color: var(--btn-secondary-hover-border-dark, #ffffff) !important;
  box-shadow: var(--btn-secondary-hover-shadow-dark, 0 6px 20px rgba(255, 255, 255, 0.2)) !important;
  transform: var(--btn-secondary-hover-transform-dark, translateY(-1px)) !important;
}

.btn--secondary-dark:focus,
.btn--secondary-dark:active {
  background: var(--btn-secondary-focus-bg-dark, transparent);
  color: var(--btn-secondary-focus-color-dark, #ffffff);
  border-color: var(--btn-secondary-focus-border-dark, #ffffff);
}

/* Focus/active: buttons stay in normal state (no visual changes) */
.btn:focus,
.btn:active,
.uc-btn:focus,
.uc-btn:active,
.kb-hero__btn:focus,
.kb-hero__btn:active,
.kb-cta__btn:focus,
.kb-cta__btn:active {
  outline: var(--btn-focus-outline, none);
  outline-offset: var(--btn-focus-outline-offset, 0);
  box-shadow: var(--btn-focus-box-shadow, none);
  transform: var(--btn-focus-transform, none);
  background: var(--btn-focus-bg, inherit);
  color: var(--btn-focus-color, inherit);
  border-color: var(--btn-focus-border-color, inherit);
  text-decoration: none;
}

/* Outline button (aka secondary) - keep neutral, themed pages may override colors via CSS variables */
.btn--outline,
.uc-btn--outline,
.kb-hero__btn--secondary,
.kb-cta__btn--secondary {
  background: var(--btn-outline-bg, transparent);
  color: var(--btn-outline-color, #1F1F1F);
  border-color: var(--btn-outline-color, #1F1F1F);
}

.btn--outline:hover,
.uc-btn--outline:hover,
.kb-hero__btn--secondary:hover,
.kb-cta__btn--secondary:hover {
  /* Modern hover: soft gradient fill, subtle lift, ambient shadow */
  background: var(--btn-outline-hover-bg, linear-gradient(135deg, var(--btn-hover-gradient-start, #1F1F1F) 0%, var(--btn-hover-gradient-end, #000000) 100%));
  color: var(--btn-outline-hover-text, #FFF);
  transform: translateY(-2px) scale(var(--btn-hover-scale, 1.02));
  box-shadow: 0 12px 28px var(--btn-hover-shadow, rgba(0, 0, 0, 0.18)), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

/* Active press feedback (no persistent state) */
.btn--outline:active,
.uc-btn--outline:active,
.kb-hero__btn--secondary:active,
.kb-cta__btn--secondary:active {
  transform: translateY(0) scale(var(--btn-press-scale, 0.98));
  box-shadow: 0 6px 16px var(--btn-hover-shadow, rgba(0, 0, 0, 0.16));
}

/* Solid buttons (primary-style) */
.btn--solid,
.kb-hero__btn--primary,
.kb-cta__btn--primary {
  background: var(--btn-solid-bg, #1F1F1F);
  color: var(--btn-solid-text, #FFFFFF);
  border-color: var(--btn-solid-border, currentColor);
}

.btn--solid:hover,
.kb-hero__btn--primary:hover,
.kb-cta__btn--primary:hover {
  background: var(--btn-solid-hover-bg, #000000);
  color: var(--btn-solid-hover-text, #FFFFFF);
  transform: translateY(-2px) scale(var(--btn-hover-scale, 1.02));
  box-shadow: 0 12px 28px var(--btn-hover-shadow, rgba(0, 0, 0, 0.18)), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn--solid:active,
.kb-hero__btn--primary:active,
.kb-cta__btn--primary:active {
  transform: translateY(0) scale(var(--btn-press-scale, 0.98));
  box-shadow: 0 6px 16px var(--btn-hover-shadow, rgba(0, 0, 0, 0.16));
}

/* Primary button focus/active - inherit from base focus rules above */

/* Size modifier */
.btn--large,
.uc-btn--large {
  padding: 20px 40px;
  font-size: 1.1rem;
}