First commit

frontend/app/assets/css/_buttons.scss

@@ -0,0 +1,62 @@
+// ---------- Buttons ----------
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  font-size: 0.9rem;
+  font-weight: 650;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: filter 0.15s, background-color 0.15s, border-color 0.15s, transform 0.1s,
+    box-shadow 0.15s;
+
+  &:active { transform: translateY(1px); }
+
+  &[disabled] { opacity: 0.55; pointer-events: none; }
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
+  color: #fff;
+  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent);
+
+  &:hover { filter: brightness(1.1); }
+}
+
+.btn-ghost {
+  border-color: var(--border);
+  background: var(--surface);
+  color: var(--text);
+
+  &:hover { border-color: var(--border-strong); background: var(--surface-2); }
+}
+
+.btn-danger {
+  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
+  color: var(--danger);
+  background: transparent;
+
+  &:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
+}
+
+.btn-sm { padding: 7px 13px; font-size: 0.82rem; border-radius: 8px; }
+
+.icon-btn {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--muted);
+  transition: color 0.15s, border-color 0.15s, transform 0.15s;
+
+  &:hover { color: var(--text); border-color: var(--border-strong); }
+
+  &:active { transform: scale(0.94); }
+}