/* ==========================================================================
   COMANDA — Buttons
   ========================================================================== */

.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.86rem;
  padding:.62rem 1.15rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  line-height:1.2;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn i{ font-size:1rem; line-height:1; }

/* Primary — appetite orange, main CTA */
.btn-primary{
  background:var(--accent-500);
  border-color:var(--accent-500);
  color:var(--white);
  box-shadow:0 4px 12px rgba(255,106,43,.28);
}
.btn-primary:hover{ background:var(--accent-600); border-color:var(--accent-600); color:var(--white); }
.btn-primary:focus-visible{ box-shadow:0 0 0 3px rgba(255,106,43,.3); }

/* Navy — secondary strong action */
.btn-navy{
  background:var(--navy-900);
  border-color:var(--navy-900);
  color:var(--white);
}
.btn-navy:hover{ background:var(--navy-800); color:var(--white); }

/* Outline */
.btn-outline{
  background:var(--white);
  border-color:var(--ink-200);
  color:var(--ink-700);
}
.btn-outline:hover{ background:var(--ink-100); color:var(--ink-900); border-color:var(--ink-200); }

.btn-outline-navy{
  background:transparent;
  border-color:var(--navy-700);
  color:var(--navy-800);
}
.btn-outline-navy:hover{ background:var(--navy-900); color:var(--white); border-color:var(--navy-900); }

/* Ghost — minimal, no border */
.btn-ghost{
  background:transparent;
  border-color:transparent;
  color:var(--ink-700);
}
.btn-ghost:hover{ background:var(--ink-100); color:var(--ink-900); }

/* Soft — tinted background, used for lightweight actions */
.btn-soft-accent{ background:var(--accent-100); border-color:var(--accent-100); color:var(--accent-600); }
.btn-soft-accent:hover{ background:#ffd9bd; color:var(--accent-600); }

.btn-soft-success{ background:var(--success-100); border-color:var(--success-100); color:var(--success-600); }
.btn-soft-danger{ background:var(--danger-100); border-color:var(--danger-100); color:var(--danger-600); }

/* Sizes */
.btn-sm{ padding:.4rem .8rem; font-size:.78rem; border-radius:var(--radius-xs); }
.btn-lg{ padding:.85rem 1.6rem; font-size:.95rem; }

/* Icon-only button */
.btn-icon{
  width:38px; height:38px;
  padding:0;
  border-radius:var(--radius-sm);
  background:var(--white);
  border:1px solid var(--ink-200);
  color:var(--ink-700);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.btn-icon:hover{ background:var(--ink-100); }
.btn-icon.btn-icon-sm{ width:32px; height:32px; font-size:.85rem; }

/* Rounded pill button group, e.g. Month/Week/Day switch */
.btn-pill-group{
  display:inline-flex;
  background:var(--ink-100);
  border-radius:var(--radius-pill);
  padding:.25rem;
  gap:.15rem;
}
.btn-pill{
  border:0;
  background:transparent;
  padding:.42rem 1rem;
  border-radius:var(--radius-pill);
  font-size:.8rem;
  font-weight:600;
  color:var(--ink-500);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-pill.active{ background:var(--white); color:var(--navy-900); box-shadow:var(--shadow-xs); }

/* Disabled state (applies to all variants) */
.btn:disabled,
.btn.disabled{
  opacity:.5;
  pointer-events:none;
}

/* Full width helper */
.btn-block{ width:100%; }