/* Button primitive. Variants: primary, secondary, square, tertiary, danger.
   Chamfer technique copied from resources/public/landing.html lines 298-520.
   Two pseudo-elements stacked via clip-path: ::before is the outer fill,
   ::after is an inset 1.5px layer that matches the page background on hover
   to create the outline illusion without losing the chamfer shape. */

.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--sm {
  padding: 6px 14px;
  font-size: var(--text-xs);
}

.button--lg {
  padding: 14px 24px;
  font-size: var(--text-base);
}

/* Wide CTA - same height, stretched horizontally. For hero actions like
   the empty-state GENERATE. */
.button--wide {
  min-width: 320px;
}

/* Primary - amber chamfered fill */

.button--primary {
  color: var(--color-text-on-accent);
}

.button--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-accent);
  clip-path: polygon(
    var(--chamfer-md) 0,
    100% 0,
    100% calc(100% - var(--chamfer-md)),
    calc(100% - var(--chamfer-md)) 100%,
    0 100%,
    0 var(--chamfer-md)
  );
  transition: background var(--duration-fast) var(--ease-default);
}

.button--primary::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  background: transparent;
  clip-path: polygon(
    calc(var(--chamfer-md) - 1px) 0,
    100% 0,
    100% calc(100% - (var(--chamfer-md) - 1px)),
    calc(100% - (var(--chamfer-md) - 1px)) 100%,
    0 100%,
    0 calc(var(--chamfer-md) - 1px)
  );
  transition: background var(--duration-fast) var(--ease-default);
}

.button--primary:hover:not(:disabled)::after {
  background: var(--color-bg-page);
}

/* Secondary - black chamfered fill, inverts on hover */

.button--secondary {
  color: var(--color-text);
}

.button--secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-text);
  clip-path: polygon(
    var(--chamfer-md) 0,
    100% 0,
    100% calc(100% - var(--chamfer-md)),
    calc(100% - var(--chamfer-md)) 100%,
    0 100%,
    0 var(--chamfer-md)
  );
}

.button--secondary::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  background: var(--color-bg-page);
  clip-path: polygon(
    calc(var(--chamfer-md) - 1px) 0,
    100% 0,
    100% calc(100% - (var(--chamfer-md) - 1px)),
    calc(100% - (var(--chamfer-md) - 1px)) 100%,
    0 100%,
    0 calc(var(--chamfer-md) - 1px)
  );
  transition: background var(--duration-fast) var(--ease-default);
}

.button--secondary:hover:not(:disabled) {
  color: var(--color-text-on-dark);
}

.button--secondary:hover:not(:disabled)::after {
  background: transparent;
}

/* Tertiary - text + corner brackets on hover (per spec §4.2) */

.button--tertiary {
  padding: var(--space-3) var(--space-5);
  color: var(--color-text);
}

.button--tertiary::before,
.button--tertiary::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
  pointer-events: none;
}

.button--tertiary::before {
  top: 0;
  left: 0;
  border-top: 1.5px solid var(--color-accent);
  border-left: 1.5px solid var(--color-accent);
}

.button--tertiary::after {
  bottom: 0;
  right: 0;
  border-bottom: 1.5px solid var(--color-accent);
  border-right: 1.5px solid var(--color-accent);
}

.button--tertiary:hover:not(:disabled) {
  color: var(--color-accent);
}

.button--tertiary:hover:not(:disabled)::before,
.button--tertiary:hover:not(:disabled)::after {
  opacity: 1;
}

/* Danger - tertiary style with error color (per task D3/resolved decisions) */

.button--danger {
  padding: var(--space-3) var(--space-5);
  color: var(--color-error);
}

.button--danger::before,
.button--danger::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
  pointer-events: none;
}

.button--danger::before {
  top: 0;
  left: 0;
  border-top: 1.5px solid var(--color-error);
  border-left: 1.5px solid var(--color-error);
}

.button--danger::after {
  bottom: 0;
  right: 0;
  border-bottom: 1.5px solid var(--color-error);
  border-right: 1.5px solid var(--color-error);
}

.button--danger:hover:not(:disabled)::before,
.button--danger:hover:not(:disabled)::after {
  opacity: 1;
}

/* Square icon button - small chamfer, 40x40 */

.button--square {
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-text-on-accent);
}

.button--square.button--sm {
  width: 32px;
  height: 32px;
}

.button--square::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-accent);
  clip-path: polygon(
    var(--chamfer-sm) 0,
    100% 0,
    100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%,
    0 100%,
    0 var(--chamfer-sm)
  );
  transition: background var(--duration-fast) var(--ease-default);
}

.button--square::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  background: transparent;
  clip-path: polygon(
    calc(var(--chamfer-sm) - 1px) 0,
    100% 0,
    100% calc(100% - (var(--chamfer-sm) - 1px)),
    calc(100% - (var(--chamfer-sm) - 1px)) 100%,
    0 100%,
    0 calc(var(--chamfer-sm) - 1px)
  );
  transition: background var(--duration-fast) var(--ease-default);
}

.button--square:hover:not(:disabled)::after {
  background: var(--color-bg-page);
}

/* Ghost square - no fill, neutral icon button (nav/toolbars) */

.button--ghost {
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
}

.button--ghost::before,
.button--ghost::after {
  display: none;
}

.button--ghost:hover:not(:disabled) {
  color: var(--color-text);
}

/* Decision - solid chamfered icon button for approve/reject on cards over
   imagery. Unlike :square it does NOT invert on hover (the invert vanishes
   the icon against a photo); it brightens instead. .is-approve = green save,
   .is-reject = orange reject. */

.button--decision {
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-text-on-accent);
}

.button--decision::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(
    var(--chamfer-sm) 0,
    100% 0,
    100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%,
    0 100%,
    0 var(--chamfer-sm)
  );
  transition: filter var(--duration-fast) var(--ease-default);
}

.button--decision:hover:not(:disabled)::before {
  filter: brightness(1.08);
}

.button--decision.is-approve::before {
  background: var(--color-success);
}

.button--decision.is-reject::before {
  background: var(--color-accent);
}

/* Row alignment helper - matches button height to the .number-input next
   to it (input has 12px vert padding + 16px font + 1px border = ~42px).
   Used in rows that mix Button and NumberInput so the two visually align
   without stretch-flex gymnastics. */

.button--match-input {
  height: 42px;
}