/* Button */
.btn{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  border-radius:var(--radius-md);
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);
  border:1px solid transparent;
  text-decoration:none;
}
.btn:disabled{
  cursor:not-allowed;
  opacity:0.45;
}

.btn--primary{
  background:var(--surface-accent);
  color:var(--text-on-accent);
  border-color:var(--surface-accent);
}
.btn--primary:hover:not(:disabled){
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  color:var(--text-on-accent);
}

.btn--secondary{
  background:transparent;
  color:var(--text-primary);
  border-color:var(--border-strong);
}
.btn--secondary:hover:not(:disabled){
  background:var(--surface-panel);
  color:var(--text-primary);
}

.btn--ghost{
  background:transparent;
  color:var(--text-primary);
  border-color:transparent;
}
.btn--ghost:hover:not(:disabled){
  background:var(--surface-panel);
  color:var(--text-primary);
}

.btn--sm{ padding:6px 14px; font-size:var(--body-sm); }
.btn--md{ padding:10px 20px; font-size:var(--body-md); }
.btn--lg{ padding:14px 28px; font-size:var(--body-lg); }

/* Card */
.card{
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  box-shadow:none;
  transition:box-shadow var(--duration-base) var(--ease-standard);
}
.card--interactive:hover{
  box-shadow:var(--shadow-md);
}

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-body);
  font-size:var(--caption);
  font-weight:var(--weight-medium);
  padding:3px 10px;
  border-radius:var(--radius-pill);
}
.badge--neutral{
  background:var(--surface-panel);
  color:var(--text-primary);
}
.badge--accent{
  background:var(--surface-accent);
  color:var(--text-on-accent);
}
.badge--outline{
  background:transparent;
  color:var(--text-secondary);
  border:1px solid var(--border-default);
}

/* Tag */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-size:var(--body-sm);
  color:var(--text-primary);
  background:var(--surface-panel);
  border:1px solid var(--border-default);
  padding:4px 10px;
  border-radius:var(--radius-sm);
}
.tag__remove{
  cursor:pointer;
  color:var(--text-secondary);
}

/* Input */
.input-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:var(--font-body);
}
.input-label{
  font-size:var(--body-sm);
  color:var(--text-secondary);
}
.input{
  font-family:var(--font-body);
  font-size:var(--body-md);
  padding:10px 12px;
  border-radius:var(--radius-md);
  color:var(--text-primary);
  background:var(--surface-card);
  border:1px solid var(--border-default);
  outline:none;
}
.input:focus{
  border-color:var(--border-focus);
}
.input--error{
  border-color:var(--copper);
}
.input:disabled{
  opacity:0.5;
}
.input-error-text{
  font-size:var(--caption);
  color:var(--copper);
}

/* Dialog */
.dialog-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(23,25,28,0.45);
  align-items:center;
  justify-content:center;
  z-index:100;
}
.dialog-overlay.is-open{
  display:flex;
}
.dialog-panel{
  position:relative;
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:var(--space-6);
  width:420px;
  max-width:90vw;
  font-family:var(--font-body);
}
.dialog-title{
  font-family:var(--font-display);
  font-size:var(--heading-3);
  margin-bottom:var(--space-3);
  color:var(--text-primary);
}
.dialog-body{
  font-size:var(--body-md);
  color:var(--text-secondary);
  line-height:var(--lh-relaxed);
}
.dialog-close{
  position:absolute;
  top:var(--space-4);
  right:var(--space-4);
  background:transparent;
  border:none;
  font-size:var(--heading-3);
  line-height:1;
  color:var(--text-secondary);
  cursor:pointer;
  padding:4px;
}
.dialog-close:hover{
  color:var(--text-primary);
}