frontend/src/ui/Button.css

/* ── Button primitive — chrome tokens only ────────────────────────── */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--chrome-radius-pill);
  background: transparent;
  color: var(--chrome-fg);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  user-select: none;
}
.ui-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}
.ui-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.ui-btn__spinner { animation: spin 1s linear infinite; }
.ui-btn__label   { line-height: 1; }
.ui-btn--block   { width: 100%; }
.ui-btn.is-loading { cursor: wait; }

/* ── Size scale ──────────────────────────────────────────────────── */
.ui-btn--size-sm { padding: 3px 10px; font-size: var(--text-xs); border-radius: var(--chrome-radius-pill); }
.ui-btn--size-md { padding: 6px 12px; font-size: var(--text-md); border-radius: var(--chrome-radius-pill); }

/* ── Variants ────────────────────────────────────────────────────── */

/* primary — solid gradient fill with glow */
.ui-btn--primary {
  background: linear-gradient(135deg, var(--chrome-accent, #d3869b), color-mix(in srgb, var(--chrome-accent, #d3869b) 70%, #c07090));
  color: #1d2021;
  border-color: transparent;
  font-weight: 600;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chrome-accent, #d3869b) 30%, transparent),
    0 1px 4px color-mix(in srgb, var(--chrome-accent, #d3869b) 15%, transparent);
  transition:
    background var(--dur-fast, 0.15s) var(--ease-out, ease-out),
    box-shadow var(--dur-fast, 0.15s) var(--ease-out, ease-out),
    transform var(--dur-fast, 0.15s) var(--ease-out, ease-out);
}
.ui-btn--primary::before { display: none; }
.ui-btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chrome-accent, #d3869b) 45%, transparent),
    0 4px 12px color-mix(in srgb, var(--chrome-accent, #d3869b) 25%, transparent);
}
.ui-btn--primary:active:not(:disabled) {
  transform: scale(0.98);
  filter: brightness(0.95);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chrome-accent, #d3869b) 30%, transparent);
}

/* subtle — default neutral surface action */
.ui-btn--subtle {
  background: transparent;
  border-color: var(--chrome-border);
  color: var(--chrome-fg-muted);
}
.ui-btn--subtle:hover:not(:disabled) {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
  border-color: var(--chrome-border-strong);
  transform: none;
}
.ui-btn--subtle:active:not(:disabled) { transform: none; }

/* ghost — transparent, hover surfaces */
.ui-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--chrome-fg-muted);
}
.ui-btn--ghost:hover:not(:disabled) {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}

/* danger — destructive */
.ui-btn--danger {
  background: color-mix(in srgb, var(--chrome-severity-err) 10%, transparent);
  border-color: color-mix(in srgb, var(--chrome-severity-err) 45%, transparent);
  color: var(--chrome-severity-err);
}
.ui-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--chrome-severity-err) 18%, transparent);
  border-color: var(--chrome-severity-err);
}

/* chip — selectable tag */
.ui-btn--chip {
  padding: 2px 8px;
  font-size: var(--text-xs);
  border-radius: var(--chrome-radius-pill);
  background: transparent;
  border-color: var(--chrome-border);
  color: var(--chrome-fg-muted);
  font-family: var(--font-sans);
  font-weight: 500;
}
.ui-btn--chip:hover:not(:disabled) {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
  border-color: var(--chrome-border-strong);
  transform: none;
}
.ui-btn--chip.is-active {
  background: color-mix(in srgb, var(--chrome-severity-ok) 12%, transparent);
  color: var(--chrome-severity-ok);
  border-color: color-mix(in srgb, var(--chrome-severity-ok) 45%, transparent);
}

/* preset — neutral chrome tile, no violet tint */
.ui-btn--preset {
  padding: 3px 8px;
  font-size: var(--text-xs);
  border-radius: var(--chrome-radius-pill);
  background: transparent;
  border-color: var(--chrome-border);
  color: var(--chrome-fg-muted);
  text-align: left;
  justify-content: flex-start;
}
.ui-btn--preset:hover:not(:disabled) {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
  border-color: var(--chrome-border-strong);
  transform: none;
  box-shadow: none;
}
.ui-btn--preset.is-active {
  background: var(--chrome-accent-bg);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
}

/* icon — square, centered, for toolbar/inline actions */
.ui-btn--icon {
  padding: 0;
  border-radius: var(--chrome-radius-pill);
  background: transparent;
  border-color: var(--chrome-border);
  color: var(--chrome-fg-muted);
}
.ui-btn--icon-sm { width: 20px; height: 20px; }
.ui-btn--icon-md { width: 22px; height: 22px; }
.ui-btn--icon:hover:not(:disabled) {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
  border-color: var(--chrome-border-strong);
}
.ui-btn--icon.is-active {
  background: var(--chrome-accent-bg);
  color: var(--chrome-accent);
  border-color: var(--chrome-accent-border);
}