/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-buttons.css
   Layer: Button System
   Version: 3.0

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s button system:
   - Shared foundation for Elementor buttons and native buttons
   - Opt-out support for unstyled/plain buttons
   - Link neutralization for button anchors
   - Optional Milo sheen treatment
   - Button variants:
     - primary
     - secondary
     - ghost
     - text
   - Context helpers for light surfaces

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Button radius, padding, motion, and interaction polish
   - Hover/active lift behavior
   - Button-specific overflow and sheen behavior
   - Milo button variants
   - Button anchor neutralization
   - Reduced-motion handling for button-owned motion

   Does NOT own:
   - Global link underline behavior
   - Typography hierarchy
   - Section-level layout or spacing
   - Container widths or composition
   - Non-button CTA link patterns
========================================================= */

/* #region 0) COMPONENT TOKENS */
.milo-btn,
.elementor-button,
button {
  /* Geometry */
  --milo-btn-radius: var(--milo-radius-xl);
  --milo-btn-font-size: var(--milo-body);
  --milo-btn-letter: 0.01em;
  --milo-btn-line-height: 1;

  /* Padding */
  --milo-btn-pad-y: var(--milo-control-pad-y);
  --milo-btn-pad-x: var(--milo-control-pad-x);

  /* Motion */
  --milo-btn-lift: var(--milo-lift-neg-sm);
  --milo-btn-lift-active: var(--milo-lift-neg-xs);
  --milo-btn-transition-dur: var(--milo-med);
  --milo-btn-transition-ease: var(--milo-ease);
  --milo-btn-sheen-dur: var(--milo-slow);
  --milo-btn-sheen-ease: var(--milo-ease);

  /* Elevation */
  --milo-btn-shadow-base: none;
  --milo-btn-shadow-hover: var(--milo-elev-control-hover);
  --milo-btn-shadow-active: var(--milo-elev-control-active);

  /* Sheen */
  --milo-button-sheen: linear-gradient(
    120deg,
    transparent 0%,
    var(--milo-sheen-mid) 35%,
    transparent 70%
  );
  --milo-btn-sheen: var(--milo-button-sheen);
  --milo-btn-sheen-opacity: 0;
  --milo-btn-sheen-opacity-hover: 1;
  --milo-btn-sheen-shift-start: -120%;
  --milo-btn-sheen-shift-end: 120%;

  /* Base/current colors */
  --milo-btn-bg-current: transparent;
  --milo-btn-fg-current: inherit;
  --milo-btn-border-current: transparent;

  /* Hover/current colors */
  --milo-btn-bg-hover-current: var(--milo-btn-bg-current);
  --milo-btn-fg-hover-current: var(--milo-btn-fg-current);
  --milo-btn-border-hover-current: var(--milo-btn-border-current);
  --milo-btn-filter-hover-current: none;
}
/* #endregion */

/* #region 1) BASE FOUNDATION */
.elementor-button,
button {
  border-radius: var(--milo-btn-radius) !important;

  font-size: var(--milo-btn-font-size);
  letter-spacing: var(--milo-btn-letter);
  line-height: var(--milo-btn-line-height);

  padding: var(--milo-btn-pad-y) var(--milo-btn-pad-x);

  background: var(--milo-btn-bg-current);
  color: var(--milo-btn-fg-current);
  border: 1px solid var(--milo-btn-border-current);

  box-shadow: var(--milo-btn-shadow-base);

  transition:
    transform var(--milo-btn-transition-dur) var(--milo-btn-transition-ease),
    box-shadow var(--milo-btn-transition-dur) var(--milo-btn-transition-ease),
    filter var(--milo-btn-transition-dur) var(--milo-btn-transition-ease),
    background var(--milo-btn-transition-dur) var(--milo-btn-transition-ease),
    border-color var(--milo-btn-transition-dur) var(--milo-btn-transition-ease),
    color var(--milo-btn-transition-dur) var(--milo-btn-transition-ease);

  will-change: transform;
}

.elementor-button:hover,
button:hover {
  transform: translateY(var(--milo-btn-lift));
  box-shadow: var(--milo-btn-shadow-hover);
  background: var(--milo-btn-bg-hover-current);
  color: var(--milo-btn-fg-hover-current);
  border-color: var(--milo-btn-border-hover-current);
  filter: var(--milo-btn-filter-hover-current);
}

.elementor-button:active,
button:active {
  transform: translateY(var(--milo-btn-lift-active));
  box-shadow: var(--milo-btn-shadow-active);
}

.elementor-button,
.elementor-button .elementor-button-text {
  color: inherit;
}

:where(a.elementor-button, button):focus-visible {
  border-radius: var(--milo-btn-radius);
}
/* #endregion */

/* #region 2) OPT-OUT (plain buttons) */
.milo-btn--plain .elementor-button,
.milo-btn--plain button {
  border-radius: initial !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
  padding: initial !important;

  background: initial !important;
  color: inherit !important;
  border: initial !important;

  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
/* #endregion */

/* #region 3) LINK NEUTRALIZATION */
a.elementor-button,
a.elementor-button:link,
a.elementor-button:visited,
a.elementor-button:hover,
a.elementor-button:focus {
  text-decoration: none !important;
}

a.elementor-button .elementor-button-text {
  text-decoration: none !important;
}
/* #endregion */

/* #region 4) MILO SHEEN (opt-in) */
.milo-btn .elementor-button {
  position: relative;
  overflow: hidden;
}

.milo-btn .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;

  background: var(--milo-btn-sheen);

  transform: translateX(var(--milo-btn-sheen-shift-start));
  transition: transform var(--milo-btn-sheen-dur) var(--milo-btn-sheen-ease);
  pointer-events: none;
  opacity: var(--milo-btn-sheen-opacity);
}

.milo-btn .elementor-button:hover::before {
  transform: translateX(var(--milo-btn-sheen-shift-end));
  opacity: var(--milo-btn-sheen-opacity-hover);
}
/* #endregion */

/* #region 5) VARIANTS */

/* #region 5A) PRIMARY */
.milo-btn.milo-btn--primary .elementor-button {
  --milo-btn-bg-current: var(--milo-pink);
  --milo-btn-fg-current: var(--milo-ink);
  --milo-btn-border-current: var(--milo-pink);

  --milo-btn-bg-hover-current: var(--milo-pink);
  --milo-btn-fg-hover-current: var(--milo-ink);
  --milo-btn-border-hover-current: var(--milo-pink);
  --milo-btn-filter-hover-current: saturate(1.02) contrast(1.02);
}
/* #endregion */

/* #region 5B) SECONDARY */
.milo-btn.milo-btn--secondary .elementor-button {
  --milo-btn-bg-current: var(--milo-white);
  --milo-btn-fg-current: var(--milo-ink);
  --milo-btn-border-current: var(--milo-pink-strong);

  --milo-btn-bg-hover-current: var(--milo-pink);
  --milo-btn-fg-hover-current: var(--milo-ink);
  --milo-btn-border-hover-current: var(--milo-pink);
}
/* #endregion */

/* #region 5C) GHOST */
.milo-btn.milo-btn--ghost .elementor-button {
  --milo-btn-bg-current: transparent;
  --milo-btn-fg-current: var(--milo-white);
  --milo-btn-border-current: var(--milo-pink-medium);
  --milo-btn-shadow-base: none;

  --milo-btn-bg-hover-current: var(--milo-pink-wash);
  --milo-btn-fg-hover-current: var(--milo-white-pure);
  --milo-btn-border-hover-current: var(--milo-pink-strong);
}
/* #endregion */

/* #region 5D) TEXT */
.milo-btn.milo-btn--text .elementor-button {
  --milo-btn-bg-current: transparent;
  --milo-btn-fg-current: inherit;
  --milo-btn-border-current: transparent;
  --milo-btn-shadow-base: none;
  --milo-btn-shadow-hover: none;
  --milo-btn-shadow-active: none;

  --milo-btn-bg-hover-current: transparent;
  --milo-btn-fg-hover-current: inherit;
  --milo-btn-border-hover-current: transparent;
}
/* #endregion */

/* #endregion */

/* #region 6) CONTEXT HELPERS */
.milo-light .milo-btn.milo-btn--ghost .elementor-button {
  --milo-btn-fg-current: var(--milo-text);
  --milo-btn-border-current: var(--milo-pink-medium);
  --milo-btn-fg-hover-current: var(--milo-ink);
}

.milo-light .milo-btn.milo-btn--text .elementor-button {
  --milo-btn-fg-current: var(--milo-text-soft);
  --milo-btn-fg-hover-current: var(--milo-ink);
}
/* #endregion */

/* #region 7) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .elementor-button,
  .elementor-button::before,
  button,
  button::before {
    transition: none !important;
    animation: none !important;
  }

  .elementor-button:hover,
  .elementor-button:active,
  button:hover,
  button:active {
    transform: none !important;
    box-shadow: var(--milo-btn-shadow-base) !important;
    filter: none !important;
  }

  .milo-btn .elementor-button:hover::before {
    transform: translateX(var(--milo-btn-sheen-shift-start)) !important;
    opacity: var(--milo-btn-sheen-opacity) !important;
  }
}
/* #endregion */