/* =============================================================================
   KINKO DESIGN SYSTEM — Button Component
   Spec: components/button.md
   Figma node: 33:6053 (component set), 2179:2436 (3D effect reference)
   Variants: Primary · Secondary · Ghost · Destructive
   Sizes: SM (36px) · MD (44px) · LG (52px)
   States: Default · Hover · Pressed · Loading · Disabled · Focus

   3-TIER TOKEN ARCHITECTURE:
   Layer 1 (Primitive) → Layer 2 (Semantic) → Layer 3 (--btn-*) → styles
   Never use --color-* or --action-* directly below the :root block.
   ============================================================================= */

/* =============================================================================
   LAYER 3 — Button component tokens (alias semantic tokens)
   ============================================================================= */

:root {
  /* Primary */
  --btn-primary-fill:           var(--action-primary);
  --btn-primary-fill-hover:     var(--action-primary-hover);
  --btn-primary-fill-pressed:   var(--action-primary-pressed);
  --btn-primary-text:           var(--text-on-action-primary);
  --btn-ring-primary:           var(--action-primary-pressed);

  /* Secondary */
  --btn-secondary-fill:         var(--action-secondary);
  --btn-secondary-fill-hover:   var(--action-secondary-hover);
  --btn-secondary-fill-pressed: var(--action-secondary-pressed);
  --btn-secondary-text:         var(--text-on-action-primary);
  --btn-ring-secondary:         var(--action-secondary-pressed);

  /* Ghost */
  --btn-ghost-text:             var(--text-primary);
  --btn-ghost-fill-hover:       var(--surface-secondary);
  --btn-ghost-hover-color:      var(--action-link);

  /* Destructive */
  --btn-destructive-fill:         var(--action-destructive);
  --btn-destructive-fill-hover:   var(--action-destructive-hover);
  --btn-destructive-fill-pressed: var(--action-destructive-pressed);
  --btn-destructive-text:         var(--text-on-action-primary);
  --btn-ring-destructive:         var(--action-destructive-pressed);

  /* Focus */
  --btn-focus-ring:             var(--border-focus);

  /* Stroke */
  --btn-stroke-border:          var(--action-secondary);
  --btn-stroke-text:            var(--action-secondary);
  --btn-stroke-fill-hover:      var(--surface-selected);
  --btn-stroke-border-pressed:  var(--action-secondary-pressed);
  --btn-stroke-fill-pressed:    var(--surface-selected);
  --btn-stroke-text-pressed:    var(--action-secondary-pressed);
  --btn-stroke-ring:            var(--action-secondary);
  --btn-stroke-border-disabled: var(--border-default);
  --btn-stroke-text-disabled:   var(--text-disabled);
  --btn-stroke-focus-ring:      rgba(11, 43, 64, 0.25); /* navy-500 at --opacity-medium — no semantic equivalent */

  /* Effect tokens — semi-transparent overlays, no semantic equivalent */
  --btn-shine:         rgba(255, 255, 255, 0.12);
  --btn-shine-hover:   rgba(255, 255, 255, 0.18);
  --btn-pressed-inset: rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   COMPONENT STYLES — use only --btn-* vars below this line
   ============================================================================= */

/* ── Base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  border-radius: var(--radius-8);
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

/* ── Sizes ── */
.btn--sm {
  height: 36px;
  padding: var(--spacing-8) var(--spacing-12);
  gap: var(--spacing-4);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
}

.btn--md {
  height: 44px;
  padding: var(--spacing-12) var(--spacing-16);
  gap: var(--spacing-8);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
}

.btn--lg {
  height: 52px;
  padding: var(--spacing-12) var(--spacing-16);
  gap: var(--spacing-12);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
}

/* ── Width modifier ── */
.btn--full {
  width: 100%;
}

/* ── Icon ── */
.btn__icon {
  flex-shrink: 0;
  display: block;
  width: var(--spacing-20);
  height: var(--spacing-20);
}

.btn__icon > svg {
  width: 100%;
  height: 100%;
}

.btn--sm .btn__icon {
  width: var(--spacing-16);
  height: var(--spacing-16);
}

.btn--lg .btn__icon {
  width: var(--spacing-24);
  height: var(--spacing-24);
}

/* Icon placeholder — square outline visible when no child is slotted in yet */
.btn__icon:empty {
  border: var(--border-width-small) solid currentColor;
  border-radius: var(--radius-2);
}

/* ── Focus — inner stroke per variant ── */
.btn:focus-visible {
  outline: none;
}

.btn--primary:focus-visible {
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 -1px 0 var(--btn-ring),
    inset 0 1px 0.75px var(--btn-shine),
    inset 0 0 0 var(--border-width-large) var(--border-focus-primary);
}

.btn--secondary:focus-visible {
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 -1px 0 var(--btn-ring),
    inset 0 1px 0.75px var(--btn-shine),
    inset 0 0 0 var(--border-width-large) var(--border-focus-secondary);
}

.btn--ghost:focus-visible {
  box-shadow: none;
  border: var(--border-width-small) solid var(--btn-focus-ring);
  border-radius: var(--radius-8);
  padding: var(--spacing-4);
}

.btn--destructive:focus-visible {
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 -1px 0 var(--btn-ring),
    inset 0 1px 0.75px var(--btn-shine),
    inset 0 0 0 var(--border-width-large) var(--border-focus-destructive);
}

/* =============================================================================
   VARIANTS
   ============================================================================= */

/* ── Primary ── */
.btn--primary {
  --btn-ring: var(--btn-ring-primary);
  background: var(--btn-primary-fill);
  color: var(--btn-primary-text);
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 -1px 0 var(--btn-ring),
    inset 0 1px 0.75px var(--btn-shine);
}

.btn--primary:active,
.btn--primary.is-pressed {
  background: var(--btn-primary-fill-pressed);
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 2px 3px var(--btn-pressed-inset);
}

.btn--primary:disabled,
.btn--primary.is-disabled {
  opacity: var(--opacity-strong);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* ── Secondary ── */
.btn--secondary {
  --btn-ring: var(--btn-ring-secondary);
  background: var(--btn-secondary-fill);
  color: var(--btn-secondary-text);
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 -1px 0 var(--btn-ring),
    inset 0 1px 0.75px var(--btn-shine);
}

.btn--secondary:active,
.btn--secondary.is-pressed {
  background: var(--btn-secondary-fill-pressed);
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 2px 3px var(--btn-pressed-inset);
}

.btn--secondary:disabled,
.btn--secondary.is-disabled {
  opacity: var(--opacity-strong);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* ── Ghost ── */
.btn--ghost {
  background: transparent;
  color: var(--btn-ghost-text);
  text-decoration: underline;
  box-shadow: none;
  /* No fixed height or padding in default state — hugs content */
  height: auto;
  padding: 0;
}

/* Ghost pressed — same as default (no visual change) */
.btn--ghost:active,
.btn--ghost.is-pressed {
  background: transparent;
}

.btn--ghost:disabled,
.btn--ghost.is-disabled {
  opacity: var(--opacity-strong);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Destructive ── */
.btn--destructive {
  --btn-ring: var(--btn-ring-destructive);
  background: var(--btn-destructive-fill);
  color: var(--btn-destructive-text);
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 -1px 0 var(--btn-ring),
    inset 0 1px 0.75px var(--btn-shine);
}

.btn--destructive:active,
.btn--destructive.is-pressed {
  background: var(--btn-destructive-fill-pressed);
  box-shadow:
    0 0 0 1px var(--btn-ring),
    inset 0 2px 3px var(--btn-pressed-inset);
}

.btn--destructive:disabled,
.btn--destructive.is-disabled {
  opacity: var(--opacity-strong);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* ── Stroke ── */
.btn--stroke {
  background: transparent;
  color: var(--btn-stroke-text);
  border: var(--border-width-medium) solid var(--btn-stroke-border);
  box-shadow: none;
}

.btn--stroke:active,
.btn--stroke.is-pressed {
  background: var(--btn-stroke-fill-pressed);
  color: var(--btn-stroke-text-pressed);
  border-color: var(--btn-stroke-border-pressed);
}

.btn--stroke:disabled,
.btn--stroke.is-disabled {
  border-color: var(--btn-stroke-border-disabled);
  color: var(--btn-stroke-text-disabled);
  opacity: var(--opacity-strong);
  cursor: not-allowed;
  pointer-events: none;
}

.btn--stroke:focus-visible {
  outline: none;
  border-width: var(--border-width-large);
  box-shadow: 0 0 0 3px var(--btn-stroke-focus-ring);
}

/* =============================================================================
   HOVER — desktop only
   ============================================================================= */

@media (hover: hover) {
  /* Primary hover — lighter fill + more lifted */
  .btn--primary:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
    background: var(--btn-primary-fill-hover);
    box-shadow:
      0 0 0 1px var(--btn-ring),
      inset 0 -1px 0 var(--btn-ring),
      inset 0 1px 0.75px var(--btn-shine-hover);
  }

  /* Secondary hover — lighter fill + more lifted */
  .btn--secondary:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
    background: var(--btn-secondary-fill-hover);
    box-shadow:
      0 0 0 1px var(--btn-ring),
      inset 0 -1px 0 var(--btn-ring),
      inset 0 1px 0.75px var(--btn-shine-hover);
  }

  /* Ghost hover — action-link text color, underline retained (color follows text) */
  .btn--ghost:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
    color: var(--btn-ghost-hover-color);
  }

  /* Destructive hover — lighter fill + more lifted */
  .btn--destructive:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
    background: var(--btn-destructive-fill-hover);
    box-shadow:
      0 0 0 1px var(--btn-ring),
      inset 0 -1px 0 var(--btn-ring),
      inset 0 1px 0.75px var(--btn-shine-hover);
  }

  /* Stroke hover — navy-50 fill, border/text unchanged */
  .btn--stroke:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
    background: var(--btn-stroke-fill-hover);
  }
}

/* =============================================================================
   LOADER + LOADING STATE
   ============================================================================= */

/* ── Loader element — circle placeholder; slot in actual loader component later ── */
.btn__loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--spacing-20);
  height: var(--spacing-20);
  border-radius: var(--radius-pill);
  border: var(--border-width-large) solid currentColor;
  flex-shrink: 0;
}

.btn--sm .btn__loader {
  width: var(--spacing-16);
  height: var(--spacing-16);
}

.btn--lg .btn__loader {
  width: var(--spacing-24);
  height: var(--spacing-24);
}

/* ── Loading state ── */
.btn.is-loading {
  pointer-events: none;
  cursor: default;
}

.btn.is-loading > *:not(.btn__loader) {
  visibility: hidden;
}

.btn.is-loading .btn__loader {
  display: block;
  transform: translate(-50%, -50%);
}

/* Disabled takes precedence over loading */
.btn:disabled .btn__loader,
.btn.is-disabled .btn__loader {
  display: none;
}